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/

修改时间 2018-09-08

真诚赞赏,手留余香
赞赏
随机推荐
PDO预处理语句和存储过程
Node.js 异步异常处理
Mac OS原来自带了apache,基本用法总结
vue-router 页面跳转后如何记录返回后的位置
Webpack的项目中,如何import导入绝对路径
div随页面滚动遇顶固定的两种方法(智能浮动层)
字段别名不能直接在谓词部分引用
JS时间戳转换
使用 SuperTest 做 Node.js API 接口单元测试
CentOS 添加 Swap 交换文件