webpack的核心概念plugin之HtmlWebpackPlugin

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文件中

文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!

THE END