- HMR:它还拥有对所有这些css文件/块的热模块替换的一流支持!
- 可缓存的样式表
- 与“render-path”css-in-js解决方案相比发送的最小总字节数,包括JS中的CSS定义
- 比V2快!
- 异步加载
- 没有重复的编译(性能)
- 更容易使用
- 特定于CSS
- SSR友好的开发构建,专注于前端DX
- 与Universal系列无缝协作
- 作为一个独立的样式加载器非常有用(你可以将它用于任何webpack项目!没有额外的依赖!)
如果您只是寻找mini-css-extract-plugin
与HMR 一样的东西,那么请不要再犹豫了。
注意:我们已经将加载器实现与调整相同 mini-css-extract-plugin
如果您已经使用过mini-css-extract-plugin
,那么您可以更改require
语句 - 就这么简单
npm i extract-css-chunks-webpack-plugin --dev
webpack.config.js:
const ExtractCssChunks = require("extract-css-chunks-webpack-plugin")
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader:ExtractCssChunks.loader,
options: {
hot: true, //如果你想要HMR - 我们尝试自动注入热重新加载但是如果它不起作用,将它添加到配置
modules: true, //如果你使用cssModules,这可以提供帮助。
reloadAll: true, //当绝望开始时 - 这是一个暴力HMR旗帜
}
},
"css-loader"
]
}
]
},
plugins: [
new ExtractCssChunks(
{
// 类似于webpackOptions.output中相同选项的选项
//两个选项都是可选
filename: "[name].css",
chunkFilename: "[id].css",
orderWarning: true, //禁用删除有关冲突顺序的警告进口
}
),
]
}
webpack.server.config.js
服务器需要以不同的方式处理,我们仍然需要一个块。幸运的是,webpack 4支持LimitChunkCountPlugin
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})