0

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

4

2 回答 2

1

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

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. 在这里查看。

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

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

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

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

于 2017-10-19T23:47:37.777 回答
0

您不需要ExtractTextPlugin用于应用程序的开发。为 css 使用加载器并为 webpack.prod 单独配置

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

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

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

于 2017-10-17T08:23:19.017 回答