• 1. 启用 HMR
  • 2. 处理 extract-text-webpack-plugin

    模块热替换 是什么意思?

    以前我们使用的 webpack --watchwebpack-dev-server 的功能是监听文件改变,就自动刷新浏览器,而这个 模块热替换 不用刷新浏览器,它是只让修改到的模块,才会在浏览器上发生相应的变化,就是生效,而不是重新刷新浏览器。

    为什么要这么做呢?有时候模块越多,改得频繁,刷新起来还是很慢的,效率低呀。

    所以有了 模块热替换 的功能,我们来试一下,让我们一改 CSS 然后浏览器不用刷新就会让页面生效改变。

    1. 启用 HMR

    webpack.config.js

    1. devServer: {
    2. port: 9000,
    3. open: true,
    4. }

    改成下面这样:

    1. devServer: {
    2. port: 9000,
    3. open: true,
    4. hot: true
    5. }

    webpack.config.js

    1. ...
    2. const webpack = require('webpack');
    3. ...
    4. module.exports = {
    5. entry: {
    6. "app.bundle": './src/app.js',
    7. "contact": './src/contact.js'
    8. },
    9. output: {
    10. path: path.resolve(__dirname, 'dist'),
    11. filename: '[name].[chunkhash].js'
    12. },
    13. devServer: {
    14. port: 9000,
    15. open: true,
    16. hot: true
    17. },
    18. plugins: [
    19. new CleanWebpackPlugin(pathsToClean),
    20. ...
    21. // 这两行是新增的
    22. new webpack.NamedModulesPlugin(),
    23. new webpack.HotModuleReplacementPlugin()
    24. ],
    25. ...
    26. };

    可惜,报错了个错:

    12. 如何使用模块热替换 HMR 来处理 CSS - 图1

    文件名还不能用 chunkhash 了,它说要用 hash 来代替 chunkhash

    我们来改一下:

    1. filename: '[name].[chunkhash].js'

    变成

    1. filename: '[name].[hash].js'

    2. 处理 extract-text-webpack-plugin

    现在你试一下改变 src/app.scss 的内容,你会发现页面不动了,你无论怎么改,页面都不会改变,也不会刷新。

    之前我们是用 extract-text-webpack-plugin 这个插件来处理 CSS 的,在用 HMR 的时候要先把它关闭一下。

    用一个参数 disable: true 就可以关闭掉。

    webpack.config.js

    1. new ExtractTextPlugin("style.css")

    变成

    1. new ExtractTextPlugin({
    2. filename: 'style.css',
    3. disable: true
    4. }),

    然后把处理 scss 文件的 loader 部分变成类似下面这样:

    1. ...
    2. test: /\.scss$/,
    3. use: ExtractTextPlugin.extract({
    4. fallback: 'style-loader',
    5. //resolve-url-loader may be chained before sass-loader if necessary
    6. use: ['css-loader', 'sass-loader']
    7. })
    8. ...

    变成

    1. ...
    2. test: /\.scss$/,
    3. use: ['style-loader', 'css-loader', 'sass-loader']
    4. ...

    再试试,能够生效。

    12. 如何使用模块热替换 HMR 来处理 CSS - 图2

    12. 如何使用模块热替换 HMR 来处理 CSS - 图3

    为什么要关闭呢这个插件呢?

    其实想想也能知道,在开发环境下,用不用 extract-text-webpack-plugin 这个插件,意义不大,你把 css 变不变成一个文件,关系不大,开发环境只要能调效,效果能够看到就可以,但是生产环境需要这个插件,我们总不能开发环境不使用这个插件,也导致生产环境也不使用吧?

    那如何解决这个问题呢?也就是说让生产环境使用这个插件,而开发环境不使用,我们下节来讨论这个问题。

    先这么多吧。