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

真诚赞赏,手留余香
赞赏
随机推荐
新媒体工作者的日常
扫描二维码发送模板消息
Win7 中安装 Composer (PHP)
Webpack 使用 HtmlWebpackPlugin 简化了HTML文件的创建
树妖1
Javascript检测字符串是否为汉字
一文看懂npm、yarn、pnpm之间的区别
Content Security Policy 与跨域脚本攻击 XSS
dedecms让channelartlist标签支持currentstyle属性方
Apache ModSecurity 基础介绍