HtmlWebpackPlugin的作用:HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js文件自动引入到这个html文件中
参考链接
1.HtmlWebpackPlugin的基本使用
(1)安装
npm install --save-dev html-webpack-plugin
(2)在webpack.config.js中使用插件
11.引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
22.配置插件
module.exports = {
plugins: [new HtmlWebpackPlugin()]
}
配置好之后，执行npm run bundle打包代码，打包完成后，就可以看到在打包文件夹中给我们生成了一个index.html的文件，但是打开页面控制台会报一个错误，这是因为我们在index.js文件中使用了写了如下代码:
import './iconfont.css'
var root = document.getElementById('demo');
root.innerHTML = "<i class = 'iconfont icon-icon-star '/>"
可以看到我们在这里通过id获取了一个id为demo的元素，但是默认生成的页面中并没有这个元素,如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script defer src="bundle.js"></script>
</head>
<body></body>
</html>
我们在index.html中手动添加一个<div id="demo"></div>元素，再在浏览器里打开页面，就可以看到页面可以正常显示了，除了手动添加一个元素，我们也可以给HtmlWebpackPlugin传入一个参数来指定所用的模板，修改配置文件如下:
module.exports = {
plugins: [new HtmlWebpackPlugin({
template: 'src/index.html' //这里可以不传参数让webpack生成默认的文件，也可以传入一个写好的html文件，以更好适应你的项目开发
})]
}
其中src/index.html的内容为:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Webpack App</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script defer src="bundle.js"></script>
</head>
<body>
<div id="demo"></div>
</body>
</html>
这样配置了之后，打包完代码在浏览器中打开index.html文件，页面就直接可以正常显示了.
2.CleanWebpackPlugin的基本使用
参考链接
(1)安装
npm install --save-dev clean-webpack-plugin
(2)在webpack.config.js中使用插件
11.引入插件
const CleanWebpackPlugin = require('clean-webpack-plugin');
22.配置插件
module.exports = {
plugins: [ new CleanWebpackPlugin(['bundle'])],//传入的参数表示要删除的文件夹名称
}
这样配置好之后，在每次打包之前，webpack都会帮我们先删掉bundle目录下的内容，然后在进行打包，我们就不用每次手动去删除了.
CleanWebpackPlugin会在打包之前先执行，帮助我们清理dist目录下之前打包的内容，当这个插件运行完了之后，就进入到了打包的环节，当整个打包环节都结束了之后，HtmlWebpackPlugin就开始执行，HtmlWebpackPlugin执行完之后就会生成一个index.html文件，打包生成的js文件会被自动加入到这个index.html文件中
网友评论