图片处理
{
test:/\.(jpg|png|gif|jpeg)$/,
use:[
{
loader:'url-loader',options:{limit:"5000",name:"[name].min.[ext]"}
},
{
loder:'img-loader'//图片压缩loader
}
]
}
postcss:是一个css转换处理平台
//安装postcss-preset-env，无需再安装autoprefixer
{
loader:"postcss-loader",
options:{
plugins:[require("postcss-preset-env"),
require('postcss-px2rem')({'remUnit':75})]
}
}
处理第三方库
如果是有npm包的库直接依赖即可；对于那些没有包的或者要指定版本的第三方库如下：
配置webpack的resolve
resolve:{
alias:{
test$:'path...'
}
}
ProvidePlugin() 自动加载模块，而不必到处 import 或 require
require('webpack')//记得引入
config={
plugins:[
new webpack.ProvidePlugin({
test:"test"//自动映入定义好的test别名文件
})
]
}
生成htmlWebpackPlugin
主要介绍几个常用的配置选项
new htmlwebpackplugin({
filename:"", //打包后的文件名称
templete:"",//使用的模板文件
chunks:[],//引入的chunk代码块
minify:{
collapseWhitespace: true//压缩代码选项
}
})
其他配置在这查看:(https://www.webpackjs.com/plugins/html-webpack-plugin/)
自动清除目录Clean-Webpack-Plugin
new CleanWebpackPlugin(["dist"])
