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

不懂程式設計發表於2017-12-08
WebCSS

模組熱替換 是什麼意思？

以前我們使用的 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()
  ],
  ...
};

複製程式碼

可惜，報錯了個錯：

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

檔名還不能用 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']
...
複製程式碼

再試試，能夠生效。

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

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

為什麼要關閉呢這個外掛呢？

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

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

先這麼多吧。

相關文章