使用Webpack和PostCSS启用热重新加载

当我在我的文本编辑器中保存样式表时，我正在重新加载我的窗口。目前，我必须手动重新加载页面才能看到任何更改。下面是我的WebPack配置文件处理处理CSS代码片段：使用Webpack和PostCSS启用热重新加载

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开发服务器和PostCSS。谢谢！

来源

2017-10-16 iknowhtml

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

1.配置的WebPack-DEV-服务器

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-热装载机

请参考文档，因为第一个例子包含ExtractTextPlugin。查看它here。

5.安装在你的.js热模块脚本入口点

内，您的.js文件入口点，你应该实现以下脚本：

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

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

来源

2017-10-19 23:47:37

我按照上面的指定修改了我的Webpack配置文件，并且在文档中指定的用于css-hot-loader的concat函数的右括号上收到一个意外的令牌错误。导致错误的特定代码是'['css-hot-loader']。concat（..剩余配置）''。 – iknowhtml

您无需使用ExtractTextPlugin进行应用程序开发。使用一个加载程序的CSS，并有一个单独的配置为webpack.prod

你包括devpack在webpack.config与模块？

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

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

来源

2017-10-17 08:23:19

我使用'ExtractTextPlugin'使样式表从JS束中分离出来，并且我想保留它，这样我就可以在浏览器中修改我的CSS。我已经在使用CSS加载器了。我没有单独的生产Webpack配置文件，但我认为这对我的使用情况没有必要。最后，'DevServer'已经在我的Webpack配置文件中。 – iknowhtml

会看到我的配置文件的其余部分有用吗？ – iknowhtml

使用Webpack和PostCSS启用热重新加载

回答

相关问题