使用 Webpack 和 PostCSS 启用热重载

Question

我希望在我的文本编辑器中保存样式表时热重载我的 window。目前，我必须手动重新加载页面才能看到任何更改。下面是我的 Webpack 配置文件中处理处理 css:

的片段

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 以及 Extract Text Plugin。谢谢！

Answer 1

您不需要使用 ExtractTextPlugin 来开发应用程序。为 css 使用加载程序并为 webpack.prod

使用单独的配置

您是否将 devServer 与模块一起包含在 webpack.config 中？

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

并且您应该运行您的应用程序带有 webpack-dev-server。

Answer 2

要使用 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 和 PostCSS 启用热重载

Enable Hot Reloading With Webpack and PostCSS

webpack

webpack-dev-server

postcss

css-modules

extract-text-plugin