webpack插件html-webpack-plugin详解

最新推荐文章于 2024-05-28 09:53:24 发布

itKingOne

最新推荐文章于 2024-05-28 09:53:24 发布

阅读量1.1w

点赞数 2

分类专栏： webpack vueJs 文章标签： webpack vue html-webpack-plugin

本文链接：https://blog.csdn.net/itKingOne/article/details/70213770

版权

插件地址：https://www.npmjs.com/package/html-webpack-plugin

这个插件用来简化创建服务于 webpack bundle 的 HTML 文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件，也可以使用 lodash 模板加载生成的 bundles，或者自己加载这些 bundles。

Installation

使用 npm 安装这个插件

$ npm install html-webpack-plugin@2 --save-dev

Basic Usage

这个插件可以帮助生成 HTML 文件，在 body 元素中，使用 script 来包含所有你的 webpack bundles，只需要在你的 webpack 配置文件中如下配置：

var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
  entry: 'index.js',
  output: {
    path: 'dist',
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
}

这将会自动在 dist 目录中生成一个名为 index.html 的文件，内容如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="index_bundle.js"></script> 
  </body>
</html>

如果你有多个 webpack 入口点，它们都会被包含在生成的 script 元素中。

如果有任何的 CSS 资源包含在 webpack 输出中（例如，使用 ExtractTextPlugin 提炼出的 css ），这些将会使用 link 包含在 HTML 页面的 head 元素中。</

最低0.47元/天解锁文章

itKingOne

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack插件html-webpack-plugin详解

插件地址：https://www.npmjs.com/package/html-webpack-plugin这个插件用来简化创建服务于 webpack bundle 的 HTML 文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件，也可以使用 lodash 模板加载生成的 bundles，或者自己加载
复制链接

扫一扫