HMR 修改样式表 需要借助于 style-loader ， 而我们之前用的是 MiniCssExtractPlugin.loader ， 这也好办，修改其中一个 rules 就可以了，我们可以试试改
module.exports = {
module: {
rules: [
{
test: /\.less$/,
use: [
// MiniCssExtractPlugin.loader,
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [require('autoprefixer')] // 添加css中的浏览器前缀
}
},
'less-loader'
]
}
]
}
}
这样我们修改 less 文件就会发现 HMR 已经实现了。
其实，我们可以发现，dev 下配置的 loader 为 style-loader , 而生产环境下则是需要 MiniCssExtractPlugin.loader
这就涉及到了不同环境之间的配置。可以通过 process.env.NODE_ENV 获取当前是开发环境或者是生产环境，然后配置不同的 loader，这里就不做展开了。下一篇文章打算在做一个 react-cli 或者 vue-cli 的配置，将开发环境的配置与生产环境的配置分开为不同的文件。
结语
前面讲到的知识都是 webpack 的一些基础的知识，更多的资料可以查询webpack 中文官网，官网讲的比较详细，我这里也是讲最常的配置，也是一篇入门系列的文章，文中涉及的知识点还有很多地方还需要完善，譬如 优化 webpack 的构建速度， 减小打包的体积等等。
学习 webpack 4.0 还需要多实践，多瞎搞，笔者也是刚刚学习 webpack 的配置，不对之处请各位指出。
下一篇文章打算从零配置一个脚手架，以加深自己对 webpack 的理解。
本文产生的代码： webpack-dev
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持黑区网络。