webpack基本打包(三)---html和image打包

和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标注要扫描哪些内容

猜你喜欢

转载自blog.csdn.net/qq_39125445/article/details/88250980