无法使用 Webpack 2.2.0 和 webpack-dev-server 2.2.1 进行 HMR（热模块替换）css/scss

Posted 2023-02-22

【中文标题】无法使用 Webpack 2.2.0 和 webpack-dev-server 2.2.1 进行 HMR（热模块替换）css/scss

【英文标题】：Unable to HMR (Hot Module Replacement) css/scss with Webpack 2.2.0 and webpack-dev-server 2.2.1

【发布时间】：2017-06-16 22:46:36

【问题描述】：

版本

"extract-text-webpack-plugin": "^2.0.0-rc.2",

"webpack": "^2.2.0",

"webpack-dev-server": "^2.2.1"

问题

"extract-text-webpack-plugin": "^1.0.1",

"webpack": "^1.14.0",

"webpack-dev-server": "^1.16.2"

自从升级到版本 2 后不再能够 HMR css/scss，更改样式会触发更改（请参见下面的输出示例）但我必须手动刷新页面以查看页面不会自动刷新的更改，如果我在更改 scss 文件后对 js 文件进行了更改，然后更改会反映为 js 更改触发 HMR，其中还包括样式更改，但仅更改没有 js 更改的样式需要手动刷新页面。

如果我配置错误或我需要做什么才能使 css/scss HMR 工作，有什么想法吗？

我也在这里发布了这个问题：https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/384，但不确定是 webpack-dev-server 问题还是 extract-text-webpack-plugin 问题，或者只是我做了什么。

命令运行：

npm 运行开发

"scripts": 
    "dev": "webpack-dev-server --hot --inline"
  

升级前的配置：

const webpack = require('webpack');
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'app');

let generateHtml = new HtmlWebpackPlugin( title: 'My App' );
let extractCSS = new ExtractTextPlugin('styles/[name].css',  allChunks: true );

const config = 
  entry: APP_DIR + '/index.js',
  output: 
    path: BUILD_DIR,
    filename: 'bundle.js'
  ,
  externals: 
    'cheerio': 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true,
  ,
  module : 
    loaders : [
      
        test : /\.jsx?/,
        include : APP_DIR,
        loader : 'babel'
      ,
      
        test: /\.scss$/,
        loader: extractCSS.extract('style', 'css?modules=true!sass?sourceMap=true')
      
    ]
  ,
  plugins: [
    generateHtml,
    extractCSS
  ]
;

module.exports = config;

升级后的配置：

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const BUILD_DIR = path.resolve(__dirname, 'public');
const APP_DIR = path.resolve(__dirname, 'app');

let generateHtml = new HtmlWebpackPlugin( title: 'My App' );
let extractCSS = new ExtractTextPlugin( filename: 'styles/[name].css', allChunks: true );

const config = 
  entry: APP_DIR + '/index.js',
  output: 
    path: BUILD_DIR,
    filename: 'bundle.js'
  ,
  externals: 
    'cheerio': 'window',
    'react/lib/ExecutionEnvironment': true,
    'react/lib/ReactContext': true,
  ,
  module : 
    loaders : [
      
        test : /\.(js|jsx)?/,
        include : APP_DIR,
        loader : 'babel-loader'
      ,
      
        test: /\.scss$/,
        loader: extractCSS.extract(
          fallbackLoader: 'style-loader',
          loader: ['css-loader?modules', 'sass-loader']
        )
      
    ]
  ,
  plugins: [
    generateHtml,
    extractCSS
  ]
;

module.exports = config;

输出示例初始页面加载。

> webpack-dev-server --hot --inline

Project is running at http://localhost:8080/
webpack output is served from /
Hash: 0e873f689fcea2b7cee6
Version: webpack 2.2.0
Time: 3350ms
          Asset       Size  Chunks                    Chunk Names
      bundle.js     1.1 MB       0  [emitted]  [big]  main
styles/main.css  634 bytes       0  [emitted]         main
     index.html  223 bytes          [emitted]         
chunk    0 bundle.js, styles/main.css (main) 1.03 MB [entry] [rendered]
   [19] ./~/react/react.js 56 bytes 0 [built]
   [45] ./~/redux/es/index.js 1.08 kB 0 [built]
  [106] ./~/react-redux/es/index.js 194 bytes 0 [built]
  [129] (webpack)/hot/emitter.js 77 bytes 0 [built]
  [130] ./app/index.js 938 bytes 0 [built]
  [131] (webpack)-dev-server/client?http://localhost:8080 4.66 kB 0 [built]
  [132] (webpack)/hot/dev-server.js 1.57 kB 0 [built]
  [139] ./app/containers/App.js 4.25 kB 0 [built]
  [178] ./~/react-dom/index.js 59 bytes 0 [built]
  [269] ./~/redux-thunk/lib/index.js 529 bytes 0 [built]
  [300] ./~/strip-ansi/index.js 161 bytes 0 [built]
  [305] ./~/url/url.js 23.3 kB 0 [built]
  [307] (webpack)-dev-server/client/socket.js 856 bytes 0 [built]
  [309] (webpack)/hot/log-apply-result.js 1.02 kB 0 [built]
  [310] multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./app/index.js 52 bytes 0 [built]
     + 296 hidden modules
Child html-webpack-plugin for "index.html":
    chunk    0 index.html 541 kB [entry] [rendered]
        [0] ./~/lodash/lodash.js 540 kB 0 [built]
        [1] (webpack)/buildin/global.js 509 bytes 0 [built]
        [2] (webpack)/buildin/module.js 517 bytes 0 [built]
        [3] ./~/html-webpack-plugin/lib/loader.js!./~/html-webpack-plugin/default_index.ejs 540 bytes 0 [built]
Child extract-text-webpack-plugin:
    chunk    0 extract-text-webpack-plugin-output-filename 1.77 kB [entry] [rendered]
        [0] ./~/css-loader/lib/css-base.js 1.51 kB 0 [built]
        [1] ./~/css-loader?modules!./~/sass-loader!./app/components/user/users.scss 267 bytes 0 [built]
Child extract-text-webpack-plugin:
    chunk    0 extract-text-webpack-plugin-output-filename 1.81 kB [entry] [rendered]
        [0] ./~/css-loader/lib/css-base.js 1.51 kB 0 [built]
        [1] ./~/css-loader?modules!./~/sass-loader!./app/containers/app.scss 307 bytes 0 [built]
Child extract-text-webpack-plugin:
    chunk    0 extract-text-webpack-plugin-output-filename 2.21 kB [entry] [rendered]
        [0] ./~/css-loader/lib/css-base.js 1.51 kB 0 [built]
        [1] ./~/css-loader?modules!./~/sass-loader!./app/components/navbar/navbar.scss 702 bytes 0 [built]
Child extract-text-webpack-plugin:
    chunk    0 extract-text-webpack-plugin-output-filename 1.87 kB [entry] [rendered]
        [0] ./~/css-loader/lib/css-base.js 1.51 kB 0 [built]
        [1] ./~/css-loader?modules!./~/sass-loader!./app/components/common/common.scss 361 bytes 0 [built]
webpack: bundle is now VALID.

scss 更改后的输出样本。

webpack: bundle is now INVALID.
Hash: f16b1beda9083db91735
Version: webpack 2.2.0
Time: 251ms
                               Asset       Size  Chunks                    Chunk Names
                           bundle.js     1.1 MB       0  [emitted]  [big]  main
0e873f689fcea2b7cee6.hot-update.json   35 bytes          [emitted]         
                     styles/main.css  626 bytes       0  [emitted]         main
chunk    0 bundle.js, styles/main.css (main) 1.03 MB [entry] [rendered]
  [143] ./app/components/navbar/navbar.scss 181 bytes 0 [built]
     + 310 hidden modules
Child html-webpack-plugin for "index.html":
    chunk    0 index.html 541 kB [entry]
         + 4 hidden modules
Child extract-text-webpack-plugin:
    chunk    0 extract-text-webpack-plugin-output-filename 2.2 kB [entry] [rendered]
        [1] ./~/css-loader?modules!./~/sass-loader!./app/components/navbar/navbar.scss 694 bytes 0 [built]
         + 1 hidden modules
webpack: bundle is now VALID.

你可以看到 main.css 的大小发生了变化，但是直到我按下 f5 后页面才刷新

【参考方案1】：

为了在使用 extract-text-webpack-plugin 时更好地控制 CSS HMR，请使用 css-hot-loader

下面是我在规则集合中的使用代码示例

test: /\.css$/, use: ['css-hot-loader'].concat(ExtractTextPlugin.extract( fallback: 'style-loader', use: 'css-loader' ))

【讨论】：

哇！！工作得很好，谢谢 ;) 应该被接受的答案

ExtractTextPlugin 已弃用，我无法通过extract-mini-css-plugin 获得css-hot-loader

【参考方案2】：

如 extract-text-webpack-plugin 的 github 主页所述： 注意事项：“不得热更换模块”

你不应该在开发时使用这个插件，它对于创建生产环境仍然很有用。 您可以创建两个 webpack 配置文件，一个用于开发，一个用于生产，这可能对这两种情况都有帮助。

【讨论】：

虽然文档声明 警告：“没有热模块更换”，但文档和行为不匹配。查看以下 repo 并提交以查看 HMR 与版本 1 完美配合，重新编译 css 并刷新浏览器以自动查看样式更改。回购：github.com/Rob-Leggett/react_redux_webpack 提交：0d976fa734e6b8d197fe1bee58cd4ed974985854 当我升级到版本 2 时，这一切都在下一次提交中停止工作。