一、css代码分割
const { merge } = require('webpack-merge');
const commBase = require('./webpack.base');
const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const webpack_prod = {
mode: 'production',
// 开启tree shaking
devtool: 'cheap-module-source-map',
module: {
rules: [
{
test: /\.css$/,
use: [
// 将css代码通过loader处理放入一个css文件中
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [autoprefixer]
}
}
}
]
}
]
},
// 引入插件
plugins: [new MiniCssExtractPlugin()]
};
module.exports = merge(commBase, webpack_prod);
const { merge } = require('webpack-merge');
const commBase = require('./webpack.base');
const autoprefixer = require('autoprefixer');
//分割css代码
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const webpack_prod = {
mode: 'production',
// 开启tree shaking
devtool: 'cheap-module-source-map',
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [autoprefixer]
}
}
}
]
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
styles: {
name: 'styles',
test: /\.css$/,
chunks: 'all',
enforce: true
}
}
},
minimize: true,
minimizer: [new CssMinimizerPlugin()]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css'
})
]
};
module.exports = merge(commBase, webpack_prod);
{
"name": "01.test",
"version": "1.0.0",
"description": "",
"sideEffects": [
"*.css"
],
"main": "index.js",
"scripts": {
"build": "webpack --config ./build/webpack.prod.js",
"dev": "webpack-dev-server --config ./build/webpack.dev.js",
"dev:build": "webpack --config ./build/webpack.dev.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.18.6",
"@babel/core": "^7.18.6",
"@babel/preset-env": "^7.18.6",
"@babel/preset-react": "^7.18.6",
"autoprefixer": "^7.0.0",
"babel-loader": "^8.2.5",
"clean-webpack-plugin": "^3.0.0",
"core-js": "^3.23.3",
"css-loader": "^5.2.7",
"css-minimizer-webpack-plugin": "^1.3.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.2",
"mini-css-extract-plugin": "^1.6.2",
"node-sass": "^5.0.0",
"postcss-loader": "^4.3.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass-loader": "^10.3.0",
"style-loader": "^2.0.0",
"url-loader": "^3.0.0",
"vue-loader": "^15.6.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.3",
"webpack-merge": "^5.0.0"
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"lodash": "^4.17.21"
}
}
使用两个插件:
:::info
mini-css-extract-plugin
: 将css代码提取出来,放入一个文件中,通过link
标签引入css-minimizer-webpack-plugin
: 将代码压缩,合并相同 css 选择器的配置 :::1.1
MiniCssExtractPlugin
插件:缺点:
main.js
引入的两个css
文件::::info 打包生成的
**dist**
文件夹下的 css 代码(**production**
)没有进行合并,
- 也没有进行压缩,增大产出代码体积
:::
:::info 通过
CssMinimizerPlugin
插件可以解决代码合并,压缩代码: ::: 将css代码放入一个文件中:
将模块中的import 'index.css'
引入的css文件代码,打包到一个css文件中,通过在index.html
中 通过<link href='xx'>
的方式,进行引入"css-minimizer-webpack-plugin": "^1.3.0", "mini-css-extract-plugin": "^1.6.2", // 将css代码在production环境中,打包到一个文件中 optimization: { splitChunks: { cacheGroups: { styles: { name: 'styles', test: /\.css$/, chunks: 'all', enforce: true } } },
使用插件在production
环境打包之后,css引入方式为:<link href="xxx"/>
,方式,将css
代码打包到一个.css
文件中,在引入页面1.2 打包后压缩css代码:(CssMinimizerPlugin)
1.2.1
打包时,压缩代码的同时,还会对css-minimizer-webpack-plugin
**css**
代码中相同的配置,进行合并
将所有的css文件提取到一个css文件中,改变默认名称的配置
1.2 合并css代码如下:
打包后的css代码如下:
注意:
**production**
生产环境下打包
在webpack打包时:如果import xx from xx
时未使用,会被tree-shaking
掉,不进行打包,出现如下情况:
页面中并未生效:引入的css文件被tree-shaking
掉了
解决:
在package.json
中告诉webpack哪些文件在打包时不需要:tree-shaking