使用 Webpack 和 PostCSS 启用热重载答案

【问题标题】：Enable Hot Reloading With Webpack and PostCSS使用 Webpack 和 PostCSS 启用热重载
【发布时间】：2017-10-20 07:47:37
【问题描述】：

我希望在我的文本编辑器中保存样式表时热重新加载我的窗口。目前，我必须手动重新加载页面以查看任何更改。下面是我的 Webpack 配置文件中处理 css 的 sn-p：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: path.resolve(__dirname, 'node_modules'),
      loader: 'babel-loader',
    },
    {
      test: /\.css$/,
      include: [`${PATHS.src}`, `${PATHS.modules}/normalize.css/normalize.css`],
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [
          {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]',
              importLoaders: 1,
            },
          },
          'postcss-loader',
        ],
      }),
    },
  ],
}

我正在使用 Webpack 3、Webpack Dev Server 和 PostCSS 以及提取文本插件。谢谢！

【问题讨论】：

标签： webpack webpack-dev-server postcss css-modules extract-text-plugin

【解决方案1】：

要使用 ExtractTextWebpackPlugin 为 css 启用热重载，您需要执行多个步骤。

1.配置 webpack-dev-server

devServer: {
  host: '0.0.0.0',
  port: 8080,
  hot: true
}

2。添加 HotModuleReplacementPlugin

plugins: [
  new webpack.HotModuleReplacementPlugin()
]

3.为开发服务器添加入口点

entry: [
  'webpack-dev-server/client?http://0.0.0.0:8080',
  // your other entry points
]

4.使用 css-hot-loader

请参阅文档，因为第一个示例包含ExtractTextPlugin。查看here。

5.在你的 .js 入口点设置热模块脚本

在您的 .js 入口点中，您应该实现以下脚本：

if (module.hot) {
  module.hot.accept();
}

这些步骤应该为您提供 JS 和 CSS 的热重载。如果有任何问题或疑问，请告诉我。

【讨论】：

我按照上面的说明修改了我的 Webpack 配置文件，并且在文档中指定的用于 css-hot-loader 的 concat 函数的右括号上收到了一个意外的令牌错误。导致错误的具体代码是['css-hot-loader'].concat(..rest of configuration)。

【解决方案2】：

您不需要使用ExtractTextPlugin 来开发应用程序。为 css 使用 loader 并为 webpack.prod 单独配置

你是否在 webpack.config 中包含了 devServer 和模块？

devServer: {
    hot: true,
    contentBase: ENTRY_DIR
  },

您应该使用 webpack-dev-server 运行您的应用程序。

【讨论】：

我使用ExtractTextPlugin，所以样式表与 JS 包是分开的，我想保持这种方式，这样我就可以在浏览器中修改我的 CSS。我已经在使用 CSS 加载器了。我没有单独的生产 Webpack 配置文件，但我认为我的用例没有必要。最后，DevServer 已经在我的 Webpack 配置文件中了。
查看我的配置文件的其余部分有用吗？
@iknowhtml ExtractTextPlugin 不支持 HMR。卡比什。