原本打包过后是css-in-js,配置完MiniCssExtractPlugin后,可以将css单独打包出来

配置

1,安装npm install --save-dev mini-css-extract-plugin

2,将style-loader替换成MiniCssExtractPlugin.loader (style.loader,支持HMR,但MiniCssExtractPlugin目前正在支持(还没))

3,安装npm install --save-dev optimize-css-assets-webpack-plugin (压缩输出的css文件)

4,安装npm install --save-dev terser-webpack-plugin (因为需要配置minimizer,所以默认的js压缩被覆盖,在旧版本中是使用的 UglifyjsWebpackPlugin来压缩的,但是在最新版本中更换成了TerserJSPlugin)

5,在optimization.minimizer注册OptimizeCSSAssetsPlugin与TerserJSPlugin,注意,当运行mode是development时minimizer并不运行,所以,不会压缩js和css

6,安装npm install css-hot-loader --save-dev (来支持MiniCssExtractPlugin的HMR功能)

7,将css-hot-loader配置于MiniCssExtractPlugin.loader前面,注意,生成的css命名,不能让根据内容的改变而改变,不然找不到变化的css文件,热更新无效,如[name].[hash].css,就会让热更新失效,建议为[name].css

• snxhtEqCkVHU 说：
  nbjmlyvsWDr
• excible 说：
  Achat Kamagra 100 Mg...
• JamesExpic 说：
  <a href=https://scho...
• Howard Truax 说：
  Hello, from CustomDa...
• lininn 说：
  @游客：你应该是连接上了吧，控制台调试w...
• 游客 说：
  博主，关于websocket的问题想要请...
• lininn 说：
  @tony：是的，也很快
• tony 说：
  curl dhcp.cn 这个也不出错哦
• 小小三 说：
  @小小二：什么Z?
• 小小二 说：
  啊啊啊啊啊啊啊啊