1.解析css,less,sass
先下载依赖包
//解析css
npm i style-loader css-loader -D
//解析less
npm i less less-loader -D
//解析sass
npm i sass sass-loader -D
module.exports={
module:{
rules:[
{
test/\.css$/,
use:[
'style-loader', //因为loader是链式从右向左调用,因此顺序千万不能错,先使用css-loader再使用style-loader
'css-loader']
},
{
test: /\.less$ /,
use: [
'style-loader', //因为loader是链式从右向左调用,因此顺序千万不能错,先使用css-loader再使用style-loader
'css-loader',
'less-loader']
},
{
test: /\.sass$ /,
use: [
'style-loader', //因为loader是链式从右向左调用,因此顺序千万不能错,先使用css-loader再使用style-loader
'css-loader',
'sass-loader']
},
]
}
}
2.解析图片和字体
先下载依赖包
npm i file-loader -D
module.exports={
module:{
rules:[
{
test: /\.(jpg|png|svg|gif)$/, //图片
use: [{
loader: 'file-loader',
options: {
outputPath:'images/',//输出到images文件夹
limit:500, //是把小于500B的文件打成Base64的格式，写入JS
name: '[name].[hash:7].[ext]',//ext为后缀，hash是md5生成的24位字符串，:7表示取前七位
}]
}，
{
test: /\.(woff|woff2|eot|ttf|otf)$/, //字体
use: [{
loader: 'file-loader',
options: {
limit: 10000,
name: '[name].[hash:7].[ext]',
}]
}
]
}
}
url-loader也可以处理图片和字体，可以设置较小资源自动base64（base64的好处就是减少http请求次数，优化页面加载性能），其内部也用到了file-loader
3.postcss autoprefixer插件自动补齐css3前缀
下载插件
npm i postcss-loader autoprefixer -D
方法一：
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: [
MinicssExtractPlugin.loader, //此处用MinicssExtractPlugin.loader替代'style-loader'
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: () => [ //一定要注意这里是[ ]
require('autoprefixer')({
overrideBrowserslist: ['last 5 version', '>1%', 'ios 7']
})
]
}
}
]
},
]
}
}
方法二：
添加一个.browserslistrc配置文件
last 5 version
> 1%
ios 7
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: [
MinicssExtractPlugin.loader, //此处用MinicssExtractPlugin.loader替代'style-loader'
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [require('autoprefixer')]
}
}
]
},
]
}
}
方法三：
在package.json中增加如下配置
{
"browserslist":[
"last 5 version",
"> 1%",
"ios 7"
]
}
webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.css$/,
use: [
MinicssExtractPlugin.loader, //此处用MinicssExtractPlugin.loader替代'style-loader'
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [require('autoprefixer')]
}
}
]
},
]
}
}
4.压缩css,js,html
先下载依赖包
npm i mini-css-extract-plugin optimize-css-assets-webpack-plugin cssnano -D
webpack.config.js
const path = require('path');
//html扩展包
const HtmlWebpackPlugin = require('html-webpack-plugin');
//从js中提取css到单独的文件
const MinicssExtractPlugin = require('mini-css-extract-plugin');
//压缩css
const OtimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports={
mode:'development', //——>指定当前构建环境
entry:[
app:'./path/app.js',
admin:'./path/admin.js'
],
output:{
filename:'[name].js',
path:path.join(__dirname,'dist');
}，
module:{
rules:[
{
test: /\.css$/,
use: [MinicssExtractPlugin.loader, 'css-loader'] //此处用MinicssExtractPlugin.loader替代'style-loader'
}
]
},
plugins:[
new HtmlWebpackPlugin({ //———>放在plugins数组里
template:path.join(__dirname,'src/admin.html'),
filename:'admin.html',
chunks:['admin'], //我的理解是一个入口就是一个chunk
inject:true, //是否注入css,js,true表示在打包完成的 admin.html 内自动引入 chunks 为 admin 的css,js
minify:{ //压缩html
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
minifyCss:true, //——>此处的minifyCss/js是为了压缩admin.html页面内的内嵌css/js,并不会对外链的css/js有影响
minifyJs:true
}
}),
// 提取并压缩css
new MinicssExtractPlugin({
filename: config.cssOutputPath
}),
// 压缩css
new OtimizeCssAssetsPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano') //此处压缩css代码配合cssnao
}),
]
}
5.自动清理构建目录
下载插件：
npm i clean-webpack-plugin -D
webpack.config.js
const path = require('path');
//自动清理构建目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports={
plugins:[
new CleanWebpackPlugin()
]
}