webpack 插件之Html-Webpack-Plugin
1. 为什么我们需要这个插件
先来看一个应用场景。
我们自己打算搭建一个网站,这个网站有很多个页面,我们为每个页面创建一大堆的css样式,js脚本,然后尝试用webpack进行打包。
于是我们在webpack.config.js里这样写了:
const path = require('path');
module.exports = {
//两个页面相应的js
entry:[
"./src/scripts/hello.js",
"./src/scripts/main.js"
],
output:{
filename:'main.bundle.js',
path:path.resolve(__dirname,'dist')
}
}
两个文件的内容如下:
hello.js
function sayHello (){
alert('Hello');
}
sayHello();
main.js
function sayMain(){
alert('Main');
}
sayMain();
但是我们这里的output只有一个path关键字,无疑,它们会被整合到一起。
我们在/dist目录下创建Index.html加载打包后的js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="./main.bundle.js"></script>
</body>
</html>
打开浏览器看看结果
这当然对于浏览器对服务器的请求数减小是极好的,但有的时候我们并不想这样做,因为两个模块没有依赖关系,我们想把它分开来
于是我们打算用webpack把它们打成两个包(在实际的应用场景中,这两个互不依赖的模块可能还有更多的依赖模块),修改过后的webpack.config.js如下
const path = require(