mini-css-extract-plugin使用中遇到的问题

2020年02月06日Web前端

webpack打包时,通常会将css和js文件打包到一起,此时我们会使用mini-css-extract-plugin插件分离并打包css到单独文件。

Conflicting order

常遇到如下警告,Conflicting order. Following module has been added:...。

此警告意思为在不同的js中引用相同的css时,先后顺序不一致。也就是说,在1.js中先后引入a.css和b.css,而在2.js中引入的却是b.css和a.css,此时会有这个warning。

处理方法

  1. 直接修改顺序可以避免这个警告,但是后期所有的文件顺序都得按照这个来,有些繁琐。
  2. 增加ignoreOrder: true配置,如:
new MiniCssExtractPlugin({
    // ......
    ignoreOrder: true
}),

修改样式,热更新失效

hmr下,热更新失效,需要手动刷新才能正确加载修改后的样式。

处理方式

以css为例,在webpack配置中需要增加如下的options:

test: /\.css$/i,
use: [{
    loader: MiniCssExtractPlugin.loader,
    options: {
        hmr: process.env.NODE_ENV === 'development',
        reloadAll: true
    }
}, {
    loader: 'css-loader'
}]

此时热更新就能生效了。