Webpack 使用 HtmlWebpackPlugin 简化了HTML文件的创建

为什么使用 HtmlWebpackPlugin

使用webpack命令打包，默认是不能生成html文件的，我以前的解决方法，就是在webpack output的目录中，添加一个index.html文件，index.html文件的内容如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <title>首页</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
</head>

<body>
  <div id='app'></div>
  <script src="bundle.js"></script>
</body>

</html>

当webpack目标文件夹变化的时候，还要把这个文件也复制过去，麻烦。为了解决此问题，可以使用webpack插件：html-webpack-plugin。

HtmlWebpackPlugin 使用方法

安装
npm install --save-dev html-webpack-plugin

然后webpack.config.js中添加该插件引用，

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

var webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackPlugin({ 
      filename: 'index.html', 
      template: 'src/index_template.html'
    })
  ]
};

以上设置，webpack编译的时候，会使用src目录下的模板index_template.html，在output目录生成index.html文件，更多的方法可以查看文档。注意一个问题，模板中不要在手动引用bundle.js文件了，HtmlWebpackPlugin会自动帮你生成。我开始的时候忽略了这个问题，发现函数都执行了两次。。。

HtmlWebpackPlugin 文档
https://www.npmjs.com/package/html-webpack-plugin
https://www.webpackjs.com/plugins/html-webpack-plugin/

webpack

声明：本站所有文章和图片，如无特殊说明，均为原创发布。商业转载请联系作者获得授权，非商业转载请注明出处。

真诚赞赏，手留余香

赞赏