1.如何抽离css样式
也就是把css样式最终以link的形式插入到文件中,style-loader会默认把样式插到head标签中的style标签,我们需要另外一个插件(mini-css-extract-plugin)来抽离样式。
1.安装mini-css-extract-plugin
2.引入mini-css-extract-plugin
//webpack.config.js
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
3.在plugins的对象中,新建MiniCssExtractPlugin 对象,在对象中指出抽离出的样式文件名称
//webpack.config.js
module.exports = {
......
plugins:[
new MiniCssExtractPlugin({
filename:'main.css' //被抽离的css样式的名称
})
]
}
4.指明到底哪一类型的文件需要被单独抽离成样式文件
这里需要MiniCssExtracPlugins文件中的loader,在module中的相应模块中设置
//webpack.config.js
module:{//模块
rules:[
{test:/\.css$/,use:[MiniCssExtractPlugin.loader,//该插件的意思是将css文件以link标签的形式引入
'css-loader']},
//还有stylus-loaer,sass-loader
{test:/\.less$/,use:[MiniCssExtractPlugin.loader,//该插件的less文件以link标签的形式插入
'css-loader','less-loader']},
]
}
5.如何抽离多个样式文件
如果只是new了一个插件对象,那么最终都会生成一个样式文件,如果想要不同类型的样式被抽离成不同的样式,那么只需要new多个插件对象,进行多个命名,
//webpack.config.js
let MiniCssExtractPlugin1 = require('mini-css-extract-plugin')
let MiniCssExtractPlugin2= require('mini-css-extract-plugin')
plugins:[
new MiniCssExtractPlugin1({
filename:'main1.css' //被抽离的css样式的名称
}),
new MiniCssExtractPlugin2({
filename:'main2.css' //被抽离的css样式的名称
}),
]
module:{//模块
rules:[
{test:/\.css$/,use:[MiniCssExtractPlugin1.loader,//该插件的意思是将css文件以link标签的形式引入
'css-loader']},
//还有stylus-loaer,sass-loader
{test:/\.less$/,use:[MiniCssExtractPlugin2.loader,//该插件的less文件以link标签的形式插入
'css-loader','less-loader']},
]
}
6.如何自动给抽离出的css样式加入浏览器前缀
需要单独的包 autoprefixer 和插件 postcss-loader,
(1)安装插件
(2)新建配置文件 postcss.config.js ,在文件中进行设置
// postcss.config.js
module.exports = {
plugins:[require('autoprefixer')]
}
(3)在webpack.config.js 中设置postcss-loader插件,postcss-loader比css-loader先执行。
//webpack.config.js
module:{//模块
rules:[
{test:/\.css$/,use:[MiniCssExtractPlugin1.loader,//该插件的意思是将css文件以link标签的形式引入
'css-loader','postcss-loader']},
//还有stylus-loaer,sass-loader
{test:/\.less$/,use:[MiniCssExtractPlugin2.loader,//该插件的less文件以link标签的形式插入
'css-loader','postcss-loader','less-loader']},
]
}
至此样式中的前缀已经成功添加
7.如何压缩打包好的css
可以在npm官方学习网站了解mini-css-extract-plugin
(1)安装优化插件optimize-css-assets-webpack-plugin,
(2)引入optimize-css-assets-webpack-plugin 模块
//webpack.config.js
let optimizdCss = require('optimize-css-assets-webpack-plugin')
(3)在module中加入优化项
//webpack.config.js
module.exports = {
optimization:{//优化项
minimizer:[
new OptimizdCss()
]
}
...
}
采用webpack命令之后,可以发现,main.css 这行代码优化成了一行。
8.优化js
1,安装插件’terser-webpack-plugin’
2.在项目中引入插件
//webpack.config.js
let TerserJSPlugin = require('terser-webpack-plugin');
3.在module中进行配置
//webpack.config.js
module.exports = {
optimization:{//优化项
minimizer:[
new TerserJSPlugin({}),
new OptimizdCss()
]
},
...
}