一、环境配置的封装

（1）使用相同的配置文件，在构建开始前将当前所属环境作为一个变量传递进去，在webpack.config.js中通过各种判断条件决定具体使用哪个配置。

//package.json{'script': {'dev': "ENV=development webpack-dev-server",'build': 'ENV=production webpack'}}//webpack.config.jsconst ENV = process.env.Env;const isProd = ENV === 'production';module.exports = {output: {filename: isProd ? 'bundle@[chunkhash].js' : 'bundle.js'},mode: ENV}

（2）为不同的环境创建各自的配置文件。

//package.json{'script': {'dev': "webpack-dev-server --config=webpack.development.config.js",'build': 'webpack --config=webpack.production.config.js'}}

1、需要将公共的配置提取出来，比如单独创建一个mon.config.js。

2、使用webpack-merge

//导入基础配置const comminConfig = require('./mon.config.js');//merge插件const merge = require('webpack-merge');const ExtractTextPlugin = require('extract-text-webpack-plugin');//当前配置结合base配置module.exports = merge.smart(comminConfig, {mode: 'production',modules: {rules: [{test: /\.css$/,use: ExtractTextPlugin.extarct({fallback: 'style-loader',use: 'css-loader'})}]}});

它在合并module.rules的过程中会以test属性作为标识符，当发现有相同项出现的时候会以后面的规则覆盖前面的规则，这样就不必添加冗余代码了（对比使用Obejct.assign，必须替换掉整个modules）

二、环境变量

使用DefinePlugin进行设置。

const webpack = require('webpack')module.exports = {entry: {app: './app.js',},mode: 'production',plugins: [new webpack.DefinePlugin({ENV: JSON.stringify('production'),}),]}

1、除了字符串类型的值外，还可以设置其他类型的环境变量。

2、许多框架和库都采用process.env.NODE_ENV作为一个区分开发环境和生成环境的变量。

prcoess.env是Node.js用于存放当前进程环境变量的对象，而NODE_ENV则可以让开发者指定当前的运行环境。

new webpack.DefinePlugin({process.env.NODE_ENV: 'production',}),

如果启用了mode：production，则webpack已经设置好了process.env.NODE_ENV，不需要再人为添加了。

三、source map

（1）source map指的是将编译、打包、压缩后的代码映射回源代码的过程。

（2）工作原理

1、webpack对于工程源代码的每一步处理都有可能会改变代码的位置、结构、甚至是所处文件，因此每一步都需要生成对应的source map。

2、若我们启用了devtool配置项，source map就会跟随源代码一步步被传递，直到生成最后的map文件。

3、这个文件默认就是打包后的文件名加上.map如：bundle.js.map。

4、在生成mapping文件的同时，bundle文件中会追加一句注释来表示map文件的位置

//bundle.js

（function(){)）()

//#sourceMappingURL=bundle.js.map

5、当我们打开浏览器的开发者工具时，map文件会同时被加载，这时浏览器会使用它来对打包后的bundle文件进行解析，分析出源代码的目录结构及内容。

（3）map文件有时会很大，但是不用担心，只要不打开开发者工具，浏览器是不会加载这些文件的，因此对于普通用户没有影响。但是使用source map会有一定的安全隐患，即任何人都可以通过dev tools看到工程源码。

（4）source map配置

module.exports = {//....devtool: 'source-map'}

对于CSS、SCSS、Less来说，则需要添加额外的source map 配置项。

（5）开启source map之后，打开chorme的开发者工具，在’Sources‘选项卡下面“webpack：//”目录中可以找到解析后的工程源码。

（6）其他形式

1、source map

2、cheap-source-map（source map简略版本，开发环境是个不错的选择）

3、eval-source-map（source map简略版本）

（7）安全

1、hidden-source-map：意味着webpack仍然会产出完整的map，不过不会再bundle文件中添加对于map文件的引用。如果想要追溯源码，需要利用一些第三方服务，将map文件上传到那上面。（如Sentry）

2、nosources-source-map：打包部署后，在浏览器开发者工具中可以看到源码的目录结构，但是具体文件内容会被隐藏起来。对于错误来说，我们仍然可以在consle控制中查看源码的错误栈，或者console日志的准确行数。

3、nginx服务器设置白名单。

四、资源压缩

（1）压缩Javascript

UglifyJS（webpack3）：UglifyJsPlugin

module.exports = {entry: {app: './app.js',},plugins: [new webpack.optimize.UglifyJsPlugin()]}

terser（webpack4） ：terser-webpack-plugin（可自定义）

支持ES6+代码的压缩，更加面向与未来。（如果开启了mode：production，则不需要人为设置）

const webpack = require('webpack')module.exports = {entry: {app: './app.js',},optimization: {minimize: true}}

（2）压缩CSS

1、前提使用extract-text-webpack-plugin或mini-css-extract-plugin将样式提取出来。然后使用optimize-css-assets-webpack-plugin进行压缩。（这个插件本质上使用的是压缩器cssnano）

const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');const ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = {module: {rules: [{test: /\.css$/,use: ExtractTextPlugin.extarct({fallback: 'style-loader',use: 'css-loader'})}]},plugins: [new ExtractTextPlugin('styles.css'),],optimization: {minimizer: [new OptimizeCSSAssetsPlugin({//生效范围,只压缩匹配到的资源assetNameRegExp: /\.css$/g,//压缩处理器，默认为cssnanocssProcessor: require('cssnano'),//压缩处理器的配置cssProcessorPluginOptions: {preset: ['default', { discardComments: { removeAll: true } }],},//是否展示logcanPrint: true}),]}};

五、缓存

（1）资源hash

通常使用chunkhash来作为文件版本号，因为它会为每一个chunk单独计算一个hash。每当代码发生变化时相应的hash也会发生变化。

module.exports = {output: {filename: 'bundle@[chunkhash].js'},}

（2）输出动态HTML

1、资源名改变后需要将HTML中的引用路径进行改变。

2、html-webpack-plugin：在打包结束后自动把最新的资源名同步过去。

const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {plugins: [new HtmlWebpackPlugin(),],}

传入一个已有的html模板

module.exports = {plugins: [new HtmlWebpackPlugin({template: './template.html'}),],}

（3）使chunk id更稳定

1、webpack3中使用ComminChunkPlugin，可能存在问题。webpack为每个模块指定的id是按数字递增的，当有新的模块插入进来时会导致其他模块的id也发生变化，进而影响了vendor chunk 中的内容。

2、解决方法在于更改模块id的生成方式，webpack3中内部自带了HashedModuleIds-Plugin，它可以为每个模块按照其所在路径生成一个字符串类型的hash id。

3、对于webpack3以下的版本，由于其不支持字符串类型的模块id，可以使用另外一个社区提供的兼容性插件webpack-hashed-module-id-plugin。

4、webpack4以后已经修改了模块id的生成机制，也就不再有该问题了。