Conflicting order. Following module has been added:
webpack打包时,通常会将css和js文件打包到一起,此时我们会使用mini-css-extract-plugin插件分离并打包css到单独文件。
mini-css-extract-plugin插件使用问题
Conflicting order
常遇到如下警告,Conflicting order. Following module has been added:…。
此警告意思为在不同的js中引用相同的css时,先后顺序不一致。也就是说,在1.js中先后引入a.css和b.css,而在2.js中引入的却是b.css和a.css,此时会有这个warning。
处理方法
直接修改顺序可以避免这个警告,但是后期所有的文件顺序都得按照这个来,有些繁琐。
增加ignoreOrder: true配置,如:
new MiniCssExtractPlugin({// ......ignoreOrder: true }),
修改样式,热更新失效
处理方式
以css为例,在webpack配置中需要增加如下的options:
test: /\.css$/i,
use: [{loader: MiniCssExtractPlugin.loader,options: {hmr: process.env.NODE_ENV === 'development',reloadAll: true}
}, {loader: 'css-loader'
}]
此时热更新就能生效了。
mini-css-extract-plugin介绍
将CSS提取为独立的文件的插件,对每个包含css的js文件都会创建一个CSS文件,支持按需加载css和sourceMap
只能用在webpack4中,对比另一个插件 extract-text-webpack-plugin优点:
- 异步加载
- 不重复编译,性能更好
- 更容易使用
- 只针对CSS
目前缺失功能,HMR,新版可通过配置生效。
安装:
yarn add -D mini-css-extract-plugin
使用:
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {plugins: [new MiniCssExtractPlugin({// 类似 webpackOptions.output里面的配置 可以忽略filename: '[name].css',chunkFilename: '[id].css',}),],module: {rules: [{test: /\.css$/,use: [{loader: MiniCssExtractPlugin.loader,options: {// 这里可以指定一个 publicPath// 默认使用 webpackOptions.output中的publicPathpublicPath: '../'},},'css-loader',],}]}
}
高级配置示例:
之前的说法是:这个插件应该只用在 production 配置中,并且在loaders链中不使用 style-loader, 特别是在开发中使用HMR,因为这个插件暂时不支持HMR。
新版可配置支持HMR。
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';module.exports = {plugins: [new MiniCssExtractPlugin({filename: devMode ? '[name].css' : '[name].[hash].css',chunkFilename: devMode ? '[id].css' : '[id].[hash].css',})],module: {rules: [{test: /\.(sa|sc|c)ss$/,use: [devMode ? 'style-loader' : MiniCssExtractPlugin.loader,'css-loader','postcss-loader','sass-loader',],}]}
}
production 阶段进行压缩
webpack5可能会内置CSS 压缩器,webpack4需要自己使用压缩器,可以使用 optimize-css-assets-webpack-plugin 插件。 设置 optimization.minimizer 覆盖webpack默认提供的,确保也指定一个JS压缩器
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');module.exports = {optimization: {minimizer: [new UglifyJsPlugin({cache: true,parallel: true,sourcMap: true}),new OptimizeCSSAssetsPlugin({}),],},plugins: [new MiniCssExtractPlugin({filename: "[name].css",chunkFilename: "[id].css"}),],module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader']}]}
}
将所有的CSS提取到一个文件中
和 extract-text-webpack-plugin 类似,可以使用 optimization.splitChunks.cacheGroups 将css提取到一个CSS中
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {optimization: {splitChunks: {cacheGroups: {styles: {name: 'styles',test: /\.css$/,chunks: 'all',enforce: true,},},},},plugins: [new MiniCssExtractPlugin({filename: '[name].css',}),],module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader']}]}
}
根据entry提取CSS
可以根据webpack 的entry name来提取CSS,这对你动态引入路由,却想依据entry保存打包的CSS的情况十分有用。这也解决了ExtractTextPlugin中CSS重复的问题
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');function recursiveIssuer(m) {if (m.issuer) {return recursiveIssuer(m.issuer);} else if (m.name) {return m.name;} else {return false;}
}module.exports = {entry: {foo: path.resolve(__dirname, 'src/foo'),bar: path.resolve(__dirname, 'src/bar')},optimization: {splitChunks: {cacheGroups: {fooStyles: {name: 'foo',test: (m,c,entry = 'foo') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,chunks: 'all',enforce: true},barStyles: {name: 'bar',test: (m,c,entry = 'bar') => m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,chunks: 'all',enforce: true}}}},plugins: [new MiniCssExtractPlugin({filename: "[name].css",})],module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,"css-loader"]}]}
}
Conflicting order. Following module has been added:相关推荐
- [mini-css-extract-plugin] warning Conflicting order
执行npm run build命令,警告: chunk page [mini-css-extract-plugin] Conflicting order. Following module has b ...
- 【警告】chunk base [mini-css-extract-plugin] Conflicting order between:
问题阐述: 复现场景:小程序使用分包后不同页面引入相同组件顺序不一致. ⚠️ 编译警告. 2021/11/30 上午10:58:17chunk common [mini-css-extract-plu ...
- nuxt项目:css相关插件加载顺序问题【extract-css-chunks-webpack-plugin】
一.warning信息 chunk pages/channelManagement/qualification/create/pages/channelManagement/qualification ...
- python manage.py startapp app 时候报错No module named _sqlite3
python manage.py startapp app 报错如下: File "manage.py", line 10, in <module> execu ...
- 如何征服Webpack 4并构建一个出色的React应用
This article has been outdated with the new release for babel, kindly check the updated article &quo ...
- Bootstrap4默认样式不对胃口?教你使用NPM+Webpack+SASS来定制
Bootstrap 是一个流行的前端样式库,可以方便快速的构建应用,但默认样式可能不尽人意,本文就介绍如何使用 NPM, Webpack, SASS 针对它的源码来定制自己的主题.版本使用的是 Boo ...
- git 创建webpack项目_Webpack入门:从安装到配置
文档 webpack 用于编译 JavaScript 模块. 一旦完成安装,你就可以通过 webpack 的 CLI 或 API 与其配合交互. 这里以入门者的角度(中文)介绍 webpack 的常用 ...
- Node.js 开发者的 Rust 入门指南
作者 | Florian GOTO 译者 | 弯月 责编 | 欧阳姝黎 出品 | CSDN(ID:CSDNnews) 以下为译文: 随着WebAssembly的进步,如果你想在JavaScrip ...
- python范例_最佳Python代码范例
python范例 Python is a general purpose programming language which is dynamically typed, interpreted, a ...
- torch.nn、(二)
参考 torch.nn.(二) - 云+社区 - 腾讯云 目录 Recurrent layers RNN LSTM GRU RNNCell LSTMCell GRUCell Transformer l ...
最新文章
- 多态指针访问虚函数不能被继承的类快速排序N皇后问题插入排序堆排序merge归并排序栈上生成对象两个栈实现一个队列...
- 【PHP ThinkPHP框架】小bug汇总[更新]
- swift 4 字符串截取
- 错排、卡特兰数、斯特林数小结
- 设计模式在Netty中的应用-责任链模式源码举例
- oppo5.0以上机器(亲测有效)激活Xposed框架的教程
- 系统学习深度学习(十一)--dropout,dropconect
- 谈谈JS中的函数节流
- HR别掉坑里了,送你最精确的计薪算法!
- Unity中的Time
- 抓包工具神器,fiddler全解
- 艺术字体手绘,如何进行创作呢
- 设置QQ空间评论回复权限,包括日志、相册、说说、留言板的评论回复和留言权限,限制名单成员无评论回复权限
- Linux下通过vi修改只读文件
- AtCoder Beginner Contest 164 E Two Currencies【最短路】
- 世界上最简单的会计书(资产负债表)
- Springboot 阿里云OSS修改下载文件名称
- 星起航长期看好抖音小店的潜力
- 基于webpack4搭建Vue服务端渲染(SSR)
- where 空集_MySQL where 条件的这个坑你碰到过没