webpack4 css样式抽离且支持热重载extract-css-chunks-webpack-plugin 服务端渲染

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
    })

webpack4 css样式抽离 且支持热重载extract-css-chunks-webpack-plugin 服务端渲染

猜你喜欢

webpack4 css样式抽离且支持热重载extract-css-chunks-webpack-plugin 服务端渲染