webpack4学习(2)

图片处理

{
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"])