webpack 3 零基礎入門教程 #12 - 如何使用模塊熱替換 HMR 來處理 CSS

模塊熱替換 是什麼意思？

之前咱們使用的 webpack --watch 或 webpack-dev-server 的功能是監聽文件改變，就自動刷新瀏覽器，而這個 模塊熱替換 不用刷新瀏覽器，它是隻讓修改到的模塊，纔會在瀏覽器上發生相應的變化，就是生效，而不是從新刷新瀏覽器。

爲何要這麼作呢？有時候模塊越多，改得頻繁，刷新起來仍是很慢的，效率低呀。

因此有了 模塊熱替換 的功能，咱們來試一下，讓咱們一改 CSS 而後瀏覽器不用刷新就會讓頁面生效改變。

1. 啓用 HMR

webpack.config.js

devServer: {
    port: 9000,
    open: true,
  }
複製代碼

改爲下面這樣：

devServer: {
    port: 9000,
    open: true,
    hot: true
  }
複製代碼

webpack.config.js

...
const webpack = require('webpack');

...

module.exports = {
  entry: {
    "app.bundle": './src/app.js',
    "contact": './src/contact.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  devServer: {
    port: 9000,
    open: true,
    hot: true
  },
  plugins: [
    new CleanWebpackPlugin(pathsToClean),
    ...
    // 這兩行是新增的
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  ...
};

複製代碼

惋惜，報錯了個錯：

文件名還不能用 chunkhash 了，它說要用 hash 來代替 chunkhash。

咱們來改一下：

filename: '[name].[chunkhash].js'
複製代碼

變成

filename: '[name].[hash].js'
複製代碼

2. 處理 extract-text-webpack-plugin

如今你試一下改變 src/app.scss 的內容，你會發現頁面不動了，你不管怎麼改，頁面都不會改變，也不會刷新。

以前咱們是用 extract-text-webpack-plugin 這個插件來處理 CSS 的，在用 HMR 的時候要先把它關閉一下。

用一個參數 disable: true 就能夠關閉掉。

webpack.config.js

new ExtractTextPlugin("style.css")
複製代碼

變成

new ExtractTextPlugin({
  filename: 'style.css',
  disable: true
}),
複製代碼

而後把處理 scss 文件的 loader 部分變成相似下面這樣：

...
  test: /\.scss$/,
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    //resolve-url-loader may be chained before sass-loader if necessary
    use: ['css-loader', 'sass-loader']
  })
...
複製代碼

變成

...
  test: /\.scss$/,
  use: ['style-loader', 'css-loader', 'sass-loader']
...
複製代碼

再試試，可以生效。

爲何要關閉呢這個插件呢？

其實想一想也能知道，在開發環境下，用不用 extract-text-webpack-plugin 這個插件，意義不大，你把 css 變不變成一個文件，關係不大，開發環境只要能調效，效果可以看到就能夠，可是生產環境須要這個插件，咱們總不能開發環境不使用這個插件，也致使生產環境也不使用吧？

那如何解決這個問題呢？也就是說讓生產環境使用這個插件，而開發環境不使用，咱們下節來討論這個問題。

先這麼多吧。