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

2020年02月06日Web前端0

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'
}]

此时热更新就能生效了。

Webpack

目录