1.打包分类
图片分类
- 配置
webpack.config.js:
module:{
//模块
rules:[//规则
{
//图片
test:/\.(png|jpg|gif)$/,
//做一个限制 当图片小于多少k的时候用base64转化
//否则用file-loader产生真实的图片
use:{
loader:'url-loader',
options:{
limit:200*1024,//图片小于200k变成base64否则用file-loader产生真实的图片
//输出路径
outputPath:'/img/',//输出图片路径文件夹名img
}
}
{
test:require.resolve('jquery'),
use:'expose-loader?$'
}
{
test:/\.js$/,
use:{
loader:'ealint-loader',
options:{
enforce:'pre',
}
},
}
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:[
'@babel/preset-env'
],
plugins:[
'@babel/plugin-proposal-class-properties'
'@babel/plugin-transform-runtime'
]
}
},
include:path.resolve(__dirname,'src'),
exclude:/node_modules/,
}
{
test:/\.css$/,use:['style-loader','css-loader']},
{
test:/\.css$/,
use:[
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
]},
{
//处理less文件
test:/\.less$/,
use:[
{
loader:'style-loader',
options:{
insertAt:'top',
}
},
'css-loader',
'less-loader',
]},
]
}
}
样式分类
配置
webpack.config.js
plugins:[//数组 放着所有的webpack插件
new HtmlWebpackPlugin ({
template:'./src/index.html',
filename:'index.html',
minify:{
//压缩
removeAttributeQuotes:true,
collapseWhitespace:true,
},
hash:true,
}),
new MiniCssExtractPlugin({
filename:'css/main.css',//样式分类文件名css
})
],
域名下的文件(CDN)
域名+路径 eg：http://www.yuming.cn/img/img.png
http://www.yuming.cn/css/main.css
配置
webpack.config.js
output:{
//出口
filename:'bundle.js',
2.filename:'bundle.[hash:5].js',
path:path.resolve（__dirname,'dist'）,
publicPath:'http://www.yuming.cn'//域名
},
域名单独处理图片或css
eg:单独处理图片
webpack.config.js
{
//图片
test:/\.(png|jpg|gif)$/,
use:{
loader:'url-loader',
options:{
limit:200*1024,
outputPath:'/img/',
publicPath:'http://www.yuming.cn',//域名
}
}