Question

当我在文本编辑器中保存样式表时，我希望热重新加载我的窗口。目前，我必须手动重新加载页面才能看到任何更改。下面是我的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

单独配置

您是否已将webServer.config中的devServer与模块一起包含在内？

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启用热重新加载

2 个答案: