上一篇:【webpack5修行之道】第3篇:webpack配置devServer
提取css
前面我们讲到,css不能被webpack处理,所以需要css-loader来进行翻译,css翻译的css字符串都被打包到了入口文件中了
我们尝试编译上一篇的代码,然后去查看编译后js文件:
可以看到,所有的css文件都在这个js文件中,
如果这个发布到生产环境,会产生什么效果?
1. 由于是js加载的时候才会动态插入样式到head里,会造成闪屏现象。
2.入口文件变大,项目启动缓慢
所以我们需要提取css,让他从js里抽离出来
使用插件mini-css-extract-plugin,安装: npm install -D mini-css-extract-plugin
修改webpack.config.js
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
//入口文件
entry: './src/index.js',
//打包后的文件配置
output: {
//指定输出的目录,一般采用绝对路径
path: resolve(__dirname,'build'),
filename: '[hash:10].built.js'
},
module: {
//loader配置
rules: [
{
//匹配以.css结尾的文件
test: /\.css$/,
//单个loader使用loader属性
//loader: 'css-loader'
//多个loader处理一个文件,需要使用use
//use属性的执行顺序为逆序,也就是数组尾->数组首的顺序
use: [
MiniCssExtractPlugin.loader,
// 'style-loader',
'css-loader'
]
},
{
//匹配以.less结尾的文件
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
// 'style-loader',
'css-loader',
'less-loader'
]
},
{
//处理图片资源
test: /\.(png|jpg|jpeg|gif|bmp)$/,
loader: 'url-loader',
options: {
//图片小于14kb,就会被base64处理,一般处理8-12KB的图片
//优点: 减少请求数量
//缺点: 图片体积会变大
limit: 14 * 1024,
}
},
{
test: /\.html$/,
loader: 'html-loader',
options: {
esModule: false
}
},
{
//打包其他资源,处理html/js/CSS以外的资源
exclude: /\.(css|js|html|json|less|png|jpg|gif)$/,
loader: 'file-loader',
}
]
},
//插件配置
plugins:[
new HtmlWebpackPlugin({
template: './index.html'
}),
new MiniCssExtractPlugin()
],
//环境配置
mode: 'development',
devServer: {
//启动gzip压缩
compress: true,
//端口
port: 8181,
//自动打开默认浏览器
open: true
}
}
然后运行编译命令:npm run build,查看编译后的目录发现,main.css已经被提取出来了,index.html里也自动引入了main.css
css兼容性处理:
css有很多兼容性问题,我们在开发的时候不可能把所有浏览器的所有版本的兼容性样式写完,所以我们需要webpack帮我们来补全css的兼容性
这里使用postcss-loader来处理,postcss-loader依赖postcss,其中所以我们先安装包: npm install -D postcss postcss-loader
npm install -D postcss postcss-loader
修改webpack.config.js
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
//入口文件
entry: './src/index.js',
//打包后的文件配置
output: {
//指定输出的目录,一般采用绝对路径