webpack打包提取css到独立文件

生产环境：能让代码优化上线运行的环境

提问：css打包在js文件中会出现什么情况?

答：css在js中,这样js文件体积变得非常大，下载就会非常慢,因为是先加载js，先执行js代码,然后创建style标签加载在页面中，那么页面就会出现闪屏现象，所以需要将css文件内容从js中提取出来。

webpack打包需要做哪些优化:

1.将css抽离出来

2.统一对代码进行压缩

3.部分样式问题和js存在兼容性问题

提取css到独立文件做的好处

1.能够让代码更快的运行,性能更好

2.能够让代码在各个浏览器中平稳的运行，不出现问题

注意命令 webpack 和 npx webpack-dev-server的区别

webpack：用于打包

npx webpack-dev-server：用于编译打包，没有输出

提取

重点内容:

需要安装包：npm i mini-css-extract-plugin

在module的rules部分，对css的处理，需要去掉style-loader 变为 MiniCssExtractPlugin.loader

可以通过 new MiniCssExtractPlugin({ filename:'css/built.css' }) 进行重命名，默认是 main.css文件

"css-loader": "^5.2.4",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"mini-css-extract-plugin": "^1.5.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1"

复制代码

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry:'./src/js/index.js',
output:{
filename:'js/built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
{
test:/\.css$/,
use:[
//创建style标签,将样式放入
// 'style-loader',
//这个loader取代style-loader.作用:提取css成单独文件
MiniCssExtractPlugin.loader,
//将css文件整合到js文件中
'css-loader']
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html' //将复制该文件打包到新的文件中
}),
new MiniCssExtractPlugin({
//对输出文件进行重命名
filename: 'css/built.css'
})
],
mode:'development'
}

复制代码

兼容

注意点：

需要和 webpack.config.js 同级添加一个 postcss.config.js 文件，因为以前的写法不支持了(看下面内容)

同时用得到了 postcss-loader 和 postcss-preset-env 插件

需要在package.json中配置css的兼容处理browserslist

{
"name": "09tiqucss",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^5.2.4",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.1",
"mini-css-extract-plugin": "^1.5.0",
"postcss-loader": "^5.2.0",
"postcss-preset-env": "^6.7.0",
"style-loader": "^2.0.0",
"url-loader": "^4.1.1"
},
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
}

复制代码

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//设置node环境变量,这一句不写就是默认生产环境
process.env.NODE_ENV = 'development'
module.exports = {
entry:'./src/js/index.js',
output:{
filename:'js/built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
{
test:/\.css$/,
use:[
//创建style标签,将样式放入
// 'style-loader',
//这个loader取代style-loader.作用:提取css成单独文件
MiniCssExtractPlugin.loader,
//将css文件整合到js文件中
'css-loader',
/*
css兼容性处理: postcss --> postcss-loader postcss-preset-env(插件)
这个插件帮postcss找到package.json中browserslist里面的配置,通过配置加载指定的css兼容性样式
"browserslist":{
//开发环境 -->设置node环境变量:process.env.NODE_ENV = development
"development":[
"last 1 chrome version", //最近的chrome浏览器
"last 1 firefox version",//最近的firefox浏览器W
"last 1 safari version" //最近的safari浏览器
],
//生产环境:默认是看生产环境的,与下面的 mode:development 无关
"production":[
">0.2%", //表示所有的浏览器了
"not dead", //不要死了的浏览器 ie10
"not op_mini all" //不要欧鹏的浏览器
]
}
*/
/*
使用loader的默认配置
'postcss-loader'
修改loader的配置(如下)
*/
{
loader:'postcss-loader',
/*
//不支持这种写法,而是抽离成postcss.config.js文件,抽离的文件是不需要任何引入的
options:{
ident:'postcss',
plugins: () => [
require('postcss-preset-env')()
]
} */
}
]
}
]
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html' //将复制该文件打包到新的文件中
}),
new MiniCssExtractPlugin({
//对输出文件进行重命名
filename: 'css/built.css'
})
],
mode:'development'
}

复制代码