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上：
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。