前言
此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出
webpack 打包css模块
webpack是js模块打包器, 如果在入口文件引入css文件或其它的less、sass等文件,需要特定的 loader去解析它们。
css-loader
: 解析css文件并且支持@import()等引入css模块style-loader
: 通过插入 <style>
标记将CSS添加到DOM中
webpack 处理loader的是 module{}, 不要写成 loader: {}
rules: 加载器规则
test: 规则
use: 用什么 loader(加载器)
webpack 配置如下
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
注意: use中的loader的执行顺序是从右到左, 先使用 css-loader解析css,再使用 style-loader将解析完的css插入DOM文档中
单独抽离css文件样式以及优化CSS文件
我想将解析后的css单独抽离出一个 css文件, 然后通过 like标签的形式引入。
需要使用插件来帮忙, plugins主要是做 loader完成不了的事情。功能很强大。
mini-css-extract-plugin
: 此插件将CSS提取到单独的文件中。
- 先安装
- const MixiCssExtractPlugin = require('mini-css-extract-plugin')
webpack配置如下, 基与上面的代码修改
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
use: [
MixiCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
new MixiCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
处理 sass文件
需要安装 sass sass-loader
webpack 配置如下
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
use: [
MixiCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new MixiCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}
优化压缩 css文件和js文件
上面虽然已经可以把 css 单独抽离成一个 css文件, 但是代码并没有得到压缩, 下面进行压缩等优化处理
安装插件:optimize-css-assets-webpack-plugin
: 用于优化\最小化CSS资产的Webpack插件uglifyjs-webpack-plugin
: 用于优化 js资产的 Webpack插件
webpack 配置:
const OptimizeCssAddetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
mode: 'production',
optimization: {
minimizer: [
new UglifyjsWebpackPlugin({
test: /\.js(\?.*)?$/i,
cache: true,
parallel: true, // 并行化可以显著加速构建,因此强烈建议设置为 true
sourceMap: true, // 使用源映射,将错误信息位置映射到模版
}),
// 使用压缩css插件之前,一定要使用 uglifyjs-webpack-plugin插件对js代码进行压缩
new OptimizeCssAddetsWebpackPlugin({}),
]
},
module: {
rules: [
{
test: /\.css$/,
use: [
MixiCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new MixiCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
]
}