html
html-webpack-plugin
作用： 默认创建一个空的THML
自动引入打包输出的所有资源
配置：
plugins:[
new HtmlWebPackPlugin({
template: './src/index.html' // 把这个文件复制，并自动引入打包，输出的所有资源（可以自定义）
})
]
图片
rules:[
// 在less 中引入img,在把less导入
// 多个loader用 use
{
test: /.less$/,
use:['style-loader', 'css-loader', 'less-loader' ]
}，
{
test:/.(jpg|png|gif)$/,
loader: 'url-loader', // url-loader 依赖 file-loader，所以都要下
options:{
limit: 8 * 1024, // 超过8kb，base64处理，一般小于8-12kb
// 优点：减少请求量
// 缺点： 图片体积变大
esModule:false
},
// 在html中直接引入img
// url-loader 解决不了html中直接引入图片的问题，用html-loader，这个是负责引入img的（不知道问什么要用html做名字）
//url-loader是 ES6模块解析，html-loader是commonJS，要关闭es6
{
test://html/,
loader: 'html-loader'
}
}
]
打包其他
module:{
rules:[
// 其他打包用file-loader
exclude://(css|JS|html|less)$ ///自定义，除掉这些
options:{name: [hash:10].[ext]}
| |
//取hash前10个 // 后缀还是原来的
]
}