不多BB,直接进入正题
1.介绍安装的包
- mini-css-extract-plugin
作用:从bundle.js中提取css为单独文件 - postcss-loader
- postcss-preset-env
postcss-preset-env 作用:帮postcss找到package.json中的browserslist(看下面的解释)里面的配置,通过配置加载指定的css兼容性样式 - optimize-css-assets-webpack-plugin
作用:对css进行压缩处理
2.安装
看过我前面文章的小伙伴们都知道了怎么安装,在这里我就不多BB,直接上配置,如果忘记的可以翻翻前面的文章,有关于安装的解释,推荐安装淘宝镜像。
文章的最后有完整的代码
3.css提取配置
1.导入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
2.在plugins属性中使用插件
new MiniCssExtractPlugin({
// 对输出的css文件进行重命名
filename: 'css/bundle.css'
})
3.配置loader
{
test: /\.css$/,
use: [
// 'style-loader',
// MiniCssExtractPlugin.loader取代style-loader
// 作用:提取js中的css成单独文件
MiniCssExtractPlugin.loader,
'css-loader'
]
}
4.在终端中输入命令:
webpack
5.打包完成之后,出现一个bundle文件夹,打开之后就可以看到一个css文件夹,里面就是从bundle.js中提取出来的css文件
4.css兼容处理配置
前提:你的css文件中有比较新的属性,这样测试才有感觉吗。推荐几个属性:text-shadow、 backface-visibility。。。
1.配置package.json文件
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
2.配置loader
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
// 使用loader的默认配置
// postcss-loader
// 也可以不使用默认配置,使用下面配置
{
// 在此修改loader的配置
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => {
// postcss的插件
require('postcss-preset-env')()
}
}
}
]
}
3.配置完上面的就可以进行测试了,首写重新打包
webpack
,之后开始用不同的浏览器打开bundle文件下的index.html,实在不行用 ie 之后在控制台调整它的版本进行测试。
5.css压缩配置
1.导入插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
2.使用插件
new OptimizeCssAssetsWebpackPlugin()
3.话不多说,配置完直接看打包之后的css文件是否压缩了。。。
6.完整代码
webpack.config.js配置
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 安装mini-css-extract-plugin并使用
// 作用:提取css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 安装optimize-css-assets-webpack-plugin并使用
// 作用:压缩css代码
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: resolve(__dirname, 'bundle')
},
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
// 使用loader的默认配置
// postcss-loader
// 如果使用默认的话,请把下面的注释掉
{
// 在此修改loader的配置
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => {
// postcss的插件
require('postcss-preset-env')()
}
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
}),
// 作用:用来提取css
new MiniCssExtractPlugin({
filename: 'css/bundle.css'
}),
// 作用:用来压缩css
new OptimizeCssAssetsWebpackPlugin()
],
mode: 'development'
// mode: 'production'
}
package.json配置
{
"name": "webpack_config",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"core-js": "^3.6.5",
"css-loader": "^3.5.3",
"file-loader": "^6.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"less": "^3.11.1",
"less-loader": "^6.1.0",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"style-loader": "^1.2.1",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
}
7.结束语
非常感谢各位小伙伴们的支持,我会继续努力写最搞笑的文章的。