Webpack是什么
Webpack是前端开发中常用的一个开源的、跨平台的模块打包工具。它主要用来打包JavaScript文件，但是借助相应的插件，它也可以转换HTML和CSS文件，甚至是图片等资源。根据官方文档，其基本原理是利用模块间的依赖关系建立依赖图，并据此生成表示这些模块的静态资源。
安装
- 使用npm
npm install --save-dev webpack - 使用yarn
yarn add webpack --dev
基本配置
从版本4.0.0后，Webpack不要求自定义一个配置文件，默认的打包入口文件为src/index，默认输出文件为dist/main.js。可查看GitHub上WebpackOptionsDefaulter.js源码：
this.set("entry", "./src");
以及下文即将提到的resolve参数中用于解析模块的文件名规则：
this.set("resolve.mainFiles", ["index"]);
由上述两行代码可知默认打包入口文件应该为项目根目录下src/index，同理，默认的输出目录也可以从上述源码中找到。
通常由于项目的需要，可以在根目录下创建一个webpack.config.js，Webpack将会自动使用该配置文件。下面简单介绍配置文件中的一些基本参数。
入口（entry）
入口起点（entry point）指示Webpack应该使用哪个模块作为构建其内部依赖图的起点。Webpack会找到依赖入口起点的模块和库。
默认值通常为./src/index.js，也可以使用entry属性指定一个或多个不同的入口起点，如下代码为实际项目中使用的单入口简写法：
module.exports = {
entry: resolve('app/main.js')
};
其中resolve函数封装Node中path.join方法，如下./build/utils.js：
exports.resolve = (...arg) => path.join(__dirname, '..', ...arg)
输出（output）
输出（output）属性指示Webpack输出它所创建的bundle的位置以及文件命名规则。默认目录为dist,默认主文件名为dist/main.js，当然也可以设定output属性值以满足自己的项目需求。如下项目实际代码：
module.exports = {
entry: resolve('app/main.js'),
output: {
//输出文件目录
path: resolve('dist'),
//静态资源引用地址，此处为'/'
publicPath: config.publicPath,
// 入口文件生产的js
filename: config.noHash ? 'js/[name].js' : 'js/[name].[chunkhash].js',
// 非入口文件生产的js
chunkFilename: config.noHash ? 'js/[name].js' : 'js/[name].[chunkhash].js'
}
}
其中config.noHash表示产生的资源是否需要hash值；由于项目中客户端和服务端存在不同的入口文件，此处filename和chunkFilename使用替换模板字符串输出文件名。
加载器（loader）
loader的作用是让Webpack可以处理除JavaScript和JSON类型外的其他文件，将它们转换为可供应用程序使用的有效模块，并添加到依赖图中。
需要在module.rules中定义规则，常用的两个属性为：test和use，如下代码：
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: [resolve('node_modules')],
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
],
plugins: [
"@babel/plugin-transform-runtime",
["@babel/plugin-proposal-class-properties", { "loose": false }],
]
}
}
}
]
}
test属性值是匹配特定文件类型的正则表达式，在上述代码中use属性值指定babel-loder用来转译js和jsx文件，排除node_modules目录下的文件。
解析（resolve）
resolve参数定义Webpack查找模块的规则，可以将模块原导入路径映射为新的路径，或是根据提供的文件后缀去检索文件。如下代码：
resolve: {
//设置路径别名
alias: {
'@': resolve('app'),
},
// 文件后缀自动补全
extensions: ['.js', '.jsx'],
}
插件（plugin）
加载器（loader）用于转换某些类型的文件，而插件则可以执行范围更广的任务。使用插件的方法也很简单——安装对应插件的NPM包后引入该插件，在plugins数组添加该对象，如下代码所示：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
plugins: [
new MiniCssExtractPlugin({
filename: config.noHash ? 'css/[name].css' : 'css/[name].[chunkhash].css',
})
],
上述MiniCssExtractPlugin插件的功能是为每一个包含CSS的JavaScript文件创建一个独立的CSS文件，支持按需加载CSS和SourceMap。