和css有点相似,但是所有的HTML文件都要放在src里面了,dist打包出来只有main-bunddle.js和打包html文件,那么安装三个加载器html-loader由于加载html,extract-loader用处是为了output出口文件只有一个,用这个加载器将输出的html和main.js分开。
file-loader就是输出的html改名的问题
安装好loader后,同理在webpack.dev.js里面引用,也是在rules里面
{
test: /\.html$/,
use: [{
loader: "file-loader",
options: {
name: "[name].html"
}
},
{
//用来区别打包的js和html分开
loader: "extract-loader"
},
{
loader: "html-loader",
options: {
attrs: ["img:src"]
}
}
]
},
配置好打包即可
下面就是配置image的打包,使用的loader就是file-loader
{
test: /\.(jpg|git|png)$/,
use: [{
loader: "file-loader",
options: {
name: "images/[name]-[hash:8].[ext]"
}
}]
}
刚刚上面的html-loader,options内容用于name标注要扫描哪些内容