Webpack从入门到出门(6)

(如转载,请注明出处)

我们现在所有的输出文件都在dist一级目录下,如果我们想要改变输出位置或输出多个文件该怎么做呢?

比如我们要把一个打包为index.html文件输出到src的上一级目录,最简单的办法就是直接在plugins下的HtmlWebpackPlugin实例下配置一个相对路径,比如: filename: './../index.html'.

但是我们可以看到,当我们利用上面的配置将index.html输出到dist上级目录时,dist目录内的index.html并没有消失,如果我们想要在每次输出文件时都先将dist目录内的旧文件清空,那么我们应该安装rimraf,安装命令如下:

npm i -D rimraf

安装完成后还需要配置一下,在package.json文件的scripts中的prod值改为"npm run clean && webpack -p",另外添加一行"clean": "rimraf ./dist/*",如下:

我们再运行npm run prod时会发现dist下的文件会被先清除后重新生成了.

2. 我们再看如何创建第二个模板. 在webpack.config.js的plugin中新添加一个HtmlWebpackPlugin实例:

在src目录中新建一个名为contact.html的文件,写入内容后运行npm run dev, 我们可以看到第一个模板被渲染出来了, 浏览器地址栏中输入localhost: 8080/contact.html可以看到我们新添加的第二个模板被渲染出来.

3.接下来我们在src目录中添加一个contact.js文件,在文件中输入console.log('new entry file'), 然后在webpack.config.js中配置如下:

首先将入口修改为:

再将出口修改为:

再次运行后发现,不管我们渲染index.html还是contact.html, app.js和contact.js都会被同时引入:

我们该如何将两个js文件分别引入两个不同的html模板里呢?

我们将plugin下的两个HtmlWebpackPlugin实例修改如下:

意思为第一个实例中剔除contact,第二个实例中只包含contact

再次运行时会看到我们的index.html中只包含app.js, 而contact.html中只有contact.js了