webpack想打包CSS文件，需要安装两个loader模块,css-loader和style-loader
yarn add css-loader style-loader -D
安装完成之后，在webconfig.js文件中进行配置
module: { // 配置 webpack 使用到的模块
rules: [
{
test: /\.css$/, // 针对 .css 结尾的文件，使用下面的loader进行处理
use: [
'style-loader',
'css-loader'
]
}
],
}
打包配置.less文件需要安装两个模块less less-loader。
yarn add less less-loader -D
安装完成之后配置如下
module: { // 配置 webpack 使用到的模块
rules: [
{
test: /\.css$/, // 针对 .css 结尾的文件，使用下面的loader进行处理
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less/,
use: [
'style-loader',
'css-loader',
'less-loader' // less-loader将less语法转成常规的css语法
]
}
],
}
webpack可以把css代码抽离为单个文件。抽离单个文件需要使用mini-css-extract-plugin
yarn add mini-css-extract-plugin -D
安装完成之后，配置如下。重点是注释部分
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin') // 引入插件
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
filename: "index.js",
path: path.resolve(__dirname, "build")
},
plugins: [ // 配置插件
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true
},
hash: true
}),
new MiniCssExtract({ // 创建该插件的实例
filename: 'main.css' // 指定输出的css文件的文件名
})
],
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtract.loader, // 配置规则，将处理后的css代码直接输出到指定文件中
'css-loader',
'postcss-loader'
]
},
{
test: /\.less$/,
use: [
MiniCssExtract.loader, // 配置规则，将处理后的css代码直接输出到指定文件中
'css-loader',
'less-loader',
'postcss-loader'
]
}
]
}
}
配置完成之后为出现一个main.css文件
在main.css中，发现没有给css生成相对应得前缀。要解决这个问题，需要使用postcss-loader 和autoprefixer，安装命令如下
yarn add postcss-loader autoprefixer -D
使用如下。重点是注释
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')
module.exports = {
mode: "production",
entry: "./src/index.js",
output: {
filename: "index.js",
path: path.resolve(__dirname, "build")
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true
},
hash: true
}),
new MiniCssExtract({
filename: 'main.css'
})
],
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtract.loader,
'css-loader',
'postcss-loader' // 给CSS3属性添加前缀
]
},
{
test: /\.less$/,
use: [
MiniCssExtract.loader,
'css-loader',
'less-loader',
'postcss-loader' // 给CSS3属性添加前缀
]
}
]
}
}
在上面代码中，指定使用postcss-load老处理.css和.less文件，但是现在还不能添加css3属性前缀，还需要配置postcss-loader。在项目的根目录创建postcss.config.js文件
module.exports = {
plugins: [
require('autoprefixer')
]
}
这个时候编译就给css3属性添加了前缀
为了项目的体积需要对main.css文件进行压缩。压缩使用optimize-css-assets-webpack-plugin
yarn add optimize-css-assets-webpack-plugin -D
配置如下
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 引入插件
module.exports = {
optimization: { // 配置webpack的优化项
minimizer: [ // 配置最小值优化项
new OptimizeCSSAssetsPlugin() // 声明css优化插件的实例
]
},
mode: "production",
entry: "./src/index.js",
output: {
filename: "index.js",
path: path.resolve(__dirname, "build")
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true
},
hash: true
}),
new MiniCssExtract({
filename: 'main.css'
})
],
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtract.loader,
'css-loader',
'postcss-loader'
]
},
{
test: /\.less$/,
use: [
MiniCssExtract.loader,
'css-loader',
'less-loader',
'postcss-loader'
]
}
]
}
}
配置完成之后，再次进行打包编译项目，就会得到压缩的nain.css文件
在设置为production生产模式之后，js文件没有被压缩，如果需要对js进行压缩，需要使用插件terser-webpack-plugin
yarn add terser-webpack-plugin -D
配置如下
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
let TerserJSPlugin = require('terser-webpack-plugin'); // 引入插件
module.exports = {
optimization: { // 配置webpack的优化项
minimizer: [ // 配置最小值优化项
new OptimizeCSSAssetsPlugin(),
new TerserJSPlugin() // 声明js压缩插件的实例
]
},
mode: "production",
entry: "./src/index.js",
output: {
filename: "index.js",
path: path.resolve(__dirname, "build")
},
}
网友评论