webpack初学者系列六：Multiple Html File

如何处理多个HTML文件？

方案一：HtmlWebpackPlugin
方案二：file-loader

HtmlWebpackPlugin

• src下新建一份 users.html 文件
• 最简单的方式，直接拷贝一份

//package.json
...
plugins:[
    ...
    new HtmlWebpackPlugin({
           template:'src/index.html'
    }),
    new HtmlWebpackPlugin({
           template:'src/users.html'
    }),
    ...
]

这个方式的缺点是不够灵活，我们在写配置代码的时候必须明确知道项目里的html文件。如果项目里有数量比较多的html文件，那这个方法就不合适，但如果只有几个html文件，那这个方法是够用的。

当然上面那个简单的拷贝会有问题，如果这样写的话，只会生成一个index.html文件，但是会使用users.html作为模板。（插件默认会生成名为index.html的文件）。我们需要改成下面这样：

//package.json
...
plugins:[
    ...
    new HtmlWebpackPlugin({
           filename:'index.html',
           template:'src/index.html'
    }),
    new HtmlWebpackPlugin({
           filename:'users.html',
           template:'src/users.html'
    }),
    ...
]

build之后会发现如下错误：

image.png

为什么？
因为htmlWebpackPlugin不仅仅只是生成文件，它会把bundle的内容注入到Html文件中。由于users.html没有对应的dom, 于是报错。

解决方式：添加chunks:[]

//package.json
...
plugins:[
    ...
    new HtmlWebpackPlugin({
           filename:'users.html',
           template:'src/users.html',
           chunks:[]
    }),
    ...
]

• chunk 是什么？
  如果我们希望重新给users.html注入bundle.js，我们可以改一下entry配置。

entry:'./src/js/app.js'
//改成下面
entry:{
    app:'./src/js/app.js'  //这里的app就是我们chunk里的内容
}
// 在users.html里重新注入bundle.js
plugins:[
    ...
    new HtmlWebpackPlugin({
           filename:'users.html',
           template:'src/users.html',
           chunks:['app']
    }),
    ...
]

file-loader

• 在app.js中添加 users.html

image.png

• package.json配置文件

image.png