1、什么是webpack
来自官方文档：
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
2、webpack 的核心概念
- entry: 入口
- output: 输出
- loader: 模块转换器，用于把模块原内容按照需求转换成新内容
- 插件(plugins): 扩展插件，在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情
- Chunk：webpack 4 的Code Splitting 产物，当设置 mode 是 production，那么 webpack 4 就会自动开启 Code Splitting，可以完成将某些公共模块去重，打包成一个单独的chunk。
3、学习webpack前的准备
在学习webpack中我们会经常用到node的相关api，下面是楼主做出的相关api总结
4、webpack4的默认配置
从 webpack v4.0.0 开始，可以不用引入一个配置文件。 webpack4在没有任何webpack配置的情况下, 会为你提供一套默认的配置.
- 将src/index.js作为入口起点(也就是entry选项)
- 将dist/main.js作为输出(也就是output选项)
执行 npx webpack，会将我们的脚本作为入口起点，然后 输出 为 main.js。
5、loader
loader是webpack四大核心概念之一，用于对源代码进行转换
为什么要用loader
Webpack本身只认识 .js 、 .json 这两种类型的文件，而通过loader，我们就可以对例如 css 等其他格式的文件进行处理。
loader 的配置
loader需要配置在module.rules中(在webpack.config.js文件中)- 格式：
{ test:[regex],//匹配规则 use:[loader_name]//loader名称 } 或者 { test:[regex], loader: [loader_name], options: { //... } } - 关于use字段：
- 可以是一个字符串/数组，use 数组的每一项既可以是字符串也可以是一个对象；
- 对loader需要配置时，需要将use写成一个对象，在该对象中的options字段中进行配置
1、file-loader
file-loader用来处理一些静态资源， 在webpack.config.js里新增配置：
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
}
在该配置下打包完的dist文件夹里, 会出现一个以MD5哈希值命名的png文件
（图片会被处理并添加到output目录下）
file-loader还有很多其它的参数，这些配置规则都可以放在options对象里，比如name、context、publicPath、outputPath等
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {},
},
],
},
],
rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "images/",
},
},
],
},
],
配置rule中name的[name]表示使用文件的原始名称, [ext]表示文件的原始类型,[hash]表示以哈希值命名, [path]表示资源相对于context的路径.
(context 默认为webpack.config.js)
