webpack从入门到精通（四）优化打包配置总结①

1. HMR

HMR 即模块热替换（hot module replacement）的简称，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。

一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块），极大的提升构建速度。

1）配置修改

基本代码结构为之前博客里使用的webpack开发环境devServer。

使用webpack-dev-server,设置 hot 属性为 true。

  devServer: {contentBase: resolve(__dirname, 'build'),compress: true,port: 3000,open: true,// // 开启HMR功能// // 当修改了webpack配置，新配置要想生效，必须重新webpack服务hot: true}

2）运行指令：npx webpack-dev-server

3）样式文件的修改

css、less可以使用HMR功能：因为style-loader内部实现了。

我们修改我们的开发环境css代码，可以发现页面样式改变了，控制台打印如下：

4）js文件的修改

我们的js代码如下：

index.js

// 引入
import print from './print';
import '../css/iconfont.css';
import '../css/index.less';

console.log('index.js文件被加载了~');

print();

function add(x, y) {return x + y;
}

console.log(add(1, 3));

print.js

console.log('print.js被加载了~');

function print() {const content = 'hello webpack';console.log(content);
}

export default print;

我们修改了print.js的代码后，控制台输出如下：

可以发现，我们虽然只修改了print.js，但是index.js也同时被加载了。

js默认不能使用HMR功能 --> 需要修改js代码，添加支持HMR功能的代码

我们可以对js代码进行处理：

index.js

if (module.hot) {// 一旦 module.hot 为true，说明开启了HMR功能。 --> 让HMR功能代码生效module.hot.accept('./print.js', function() {// 方法会监听 print.js 文件的变化，一旦发生变化，其他模块不会重新打包构建。// 会执行后面的回调函数print();});
}

这次修改print.js后，控制台输入如下：

2. source-map

我们在打包中，将开发环境中源代码经过压缩，去空格，babel编译转化，最终可以得到适用于生产环境的项目代码，这样处理后的项目代码和源代码之间差异性很大，会造成无法debug的问题。

举例来说，如果压缩等处理过的生产环境中的代码出现bug，调试的时候只能定位到压缩处理后的代码的位置，无法定位到开发环境中的源代码。

sourcemap就是为了解决上述代码定位的问题，简单理解，就是构建了处理前的代码和处理后的代码之间的桥梁。主要是方便开发人员的错误定位。这里的处理操作包括：

I）压缩，减小体积

II）将多个文件合并成同一个文件

III）其他语言编译成javascript，比如TypeScript和CoffeeScript等

webpack在打包中同样支持Sourcemap，并且提供了十几种的组合。

[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

我们只需要在配置文件中增加配置即可：

  devtool: 'eval-source-map'

devtool属性可以接受以下值：

不同的值会明显影响到构建（build）和重新构建（rebuild）的速度。

其中一些值适用于开发环境，一些适用于生产环境。对于开发环境，通常希望更快速的source map，需要添加到bundle中以增加体积为代价；但是对于生产环境，则希望更精准的source map，需要从bundle中分离并独立存在。

   下面是选择哪个值的思路：开发环境：速度快，调试更友好速度快(eval>inline>cheap>...)eval-cheap-souce-mapeval-source-map调试更友好souce-mapcheap-module-souce-mapcheap-souce-map
--> eval-source-map  / eval-cheap-module-souce-map
生产环境：源代码要不要隐藏? 调试要不要更友好内联会让代码体积变大，所以在生产环境不用内联nosources-source-map 全部隐藏hidden-source-map 只隐藏源代码，会提示构建后代码错误信息--> source-map / cheap-module-souce-map

3. oneOf

webpack原本的loader是将每个文件都过一遍，比如有一个js文件，rules中有10个loader，第一个是处理js文件的loader，当第一个loader处理完成后webpack不会自动跳出，而是会继续拿着这个js文件去尝试匹配剩下的9个loader，相当于没有break。而oneOf就相当于这个break。

用法：

rules:[oneOf:[{test:/\.css$/,use:[...common_css_loader]},{test:/\.less$/,use:[...common_css_loader,'less-loader']},{test:/\.html/,loader:'html-loader'}]
]

4. babel缓存

babel-loader在执行的时候，可能会产生一些运行期间重复的公共文件，造成代码体积大而冗余，同时也会降低编译效率。可以加上cacheDirectory参数开启babel缓存。

          {test: /\.js$/,loader: 'babel-loader',options: {// 开启babel缓存// 第二次构建时，会读取之前的缓存cacheDirectory: true}}

5. 静态资源缓存

静态资源缓存是前端性能优化的一个点，所以在前端开发过程中，一般会最大限度的利用缓存（这里主要是强缓存）。回到本文主题，在使用webpack构建的项目中，稍有不慎的话，即使服务器设置了缓存策略，可能构建的项目无法实现静态资源缓存。那么webpack怎样才能达到使用缓存的效果呢，下面就来谈谈这个问题。

我们都知道，webpack有各种hash值，包括每次项目构建hash，不同入口的chunkhash、文件的内容contenthash，这么多hash，它们有什么区别呢？

hash

hash是跟整个webpack构建项目相关的，每次项目构建hash对应的值都是不同的，即使项目文件没有做“任何修改”。

其实是有修改的，因为每次webpack打包编译都会注入webpack的运行时代码，导致整个项目有变化，所以每次hash值都会变化的。由此推断使用该方式是无法达到缓存的。

chunkhash

chunkhash，从字面上就能猜出它是跟webpack打包的chunk相关的。具体来说webpack是根据入口entry配置文件来分析其依赖项并由此来构建该entry的chunk，并生成对应的hash值。不同的chunk会有不同的hash值。一般在项目中把公共的依赖库和程序入口文件隔离并进行单独打包构建，用chunkhash来生成hash值，只要依赖公共库不变，那么其对应的chunkhash就不会变，从而达到缓存的目的。

一般在项目中对webpack的entry使用chunkhash，具体表现在output配置项上：

moudule.exports = {entry: {app: './src/main.js',vendor: ['react', 'redux', 'react-dom', 'react-redux', 'react-router-redux']},output: {path:path.join(__dirname, '/dist/js'),filename: '[name].[chunkhash].js'}...
}

contenthash

contenthash表示由文件内容产生的hash值，内容不同产生的contenthash值也不一样。在项目中，通常做法是把项目中css都抽离出对应的css文件来加以引用。比方在webpack配置这样来用：

  plugins: [new MiniCssExtractPlugin({filename: 'css/built.[chunkhash:10].css'})]

上面配置有一个问题，因为使用了chunkhash，它与依赖它的chunk共用chunkhash。

比方在上面app chunk例子中依赖一个index.css文件，index.css的hash是跟着app的chunkhash走的，只要app文件变更的话，那么即使index.css文件没有变化，它的hash值也是会跟着变化的，导致缓存失效。

那么这时我们可以使用extra-text-webpack-plugin里的contenthash值，保证即使css文件所处的模块里就算其他文件内容改变，只要css文件内容不变，它的hash值就不会变。

  plugins: [new MiniCssExtractPlugin({filename: 'css/built.[contenthash:10].css'})]