Webpack3.x 中 html-webpack-plugin的用法

最新推荐文章于 2024-02-19 09:36:55 发布

Stangor

最新推荐文章于 2024-02-19 09:36:55 发布

阅读量3.3k

点赞数 2

分类专栏： webpack3-x

本文链接：https://blog.csdn.net/stanxl/article/details/78620037

版权

webpack3-x 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

继上篇webpack 入门，安装与配置完后，是时候去把这些绑定好的file放到html中使用，使用!+tab，快速在一个.html文件中创建一个模板(index-manual.html)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>hello world</title>

</head>
<body>
    <h1>content goes here</h1>
    <script src="app.bundle.js"></script>

</body>
</html>

并把<script>中的src 指向app.bundle.js，看看有没有成功，在app.js中加入一行代码：

console.log("hello webpack");

如果在页面的console中可以输出『hello webpack』，则说明it works，看页面的控制台输出：

可以看控制台正确的输入了『hello webpack』。

以上就是手动去创建一个template，但是我们可以用webpack HTML plugin去生成一个template，先安装这个plugin: html-webpack-plugin

安装完成后，可以在package.json的dependencies中看到它的版本：

"devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.8.1"
  }

然后去github看它的basic用法：https://github.com/jantimon/html-webpack-plugin
先编辑webpack.config.js:

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: "./src/app.js",
    output:{
        path: __dirname + "/dist",
        filename: "app.bundle.js"
    },
    plugins: [new HtmlWebpackPlugin({
        title: 'title dynamic tested',
        template: './src/my-index.html', // Load a custom template (lodash by default see the FAQ for details)
      }
    ]
}

上面的output中的path要应该是绝对路径，不然后会有error，所以用__dirname，注意下。在使用的模板是src路径下的my-index.html，创建好这个模板放在src路径下面，要注意的是这个模板中不要写任何的<script>,<link>，my-index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>test template</title>
  </head>
  <body>
</html>

配置好后，运行命令：

npm run dev

然后就可以看到：

➜  WebPack110 npm run dev

> webpack-stater@1.0.0 dev /Users/Stan/Desktop/WebPack110
> webpack -d --watch


Webpack is watching the files…

Hash: 6278eacd9eed27d40b5c
Version: webpack 3.8.1
Time: 429ms
        Asset       Size  Chunks             Chunk Names
app.bundle.js    3.19 kB       0  [emitted]  main
   index.html  183 bytes          [emitted]
   [0] ./src/app.js 55 bytes {0} [built]
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/my-index.html 540 bytes {0} [built]
       [2] (webpack)/buildin/global.js 488 bytes {0} [built]
       [3] (webpack)/buildin/module.js 495 bytes {0} [built]
        + 1 hidden module

一个新index.html模板就生成了：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>test template</title>
  </head>
  <body>
      <script type="text/javascript" src="app.bundle.js"></script>
  </body>
</html>

所以经过以上的这些步骤，一个全新的index.html，这是个目标模板，我们想要的，但是它的title以及其他的格式等并不是动态的，都是写死的，所以想要它变得灵活，可以先把my-index模板里的<title>改成动态的，my-index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
</html>

ok，这个时候来捋一捋，my-index.html中的title决定了最终的目标模板index.html中的title如何显示，而my-index.html中的title是动态的，它是在webpack.config.js中配置的。除此以外可以配置minify属性，如果它的值是true，可以理解成是压缩后的版本，没有了换行，最终的代码是一行显示。对于hash属性，如果你看到上面terminal中输出的信息中有一行是它的hash信息：

➜  WebPack110 npm run dev

> webpack-stater@1.0.0 dev /Users/Stan/Desktop/WebPack110
> webpack -d --watch


Webpack is watching the files…

Hash: 1b384847a4e4c83b21b1
Version: webpack 3.8.1

如果hash 属性设置为true的话，会在index.html中看到：

<script type="text/javascript" src="app.bundle.js?8db3315a8cb0d50bb9e5"></script>

把上面的hash值拼接到了app.bundle.js后面，如果现在处于watch状态，那么每次更改app.js中的内容，这里对应的hash value都会相应的更新。所以像下面这样就可以定制目标模板了：

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: "./src/app.js",
    output:{
        path: __dirname + "/dist",
        filename: "app.bundle.js"
    },
    plugins: [new HtmlWebpackPlugin({
        title: 'title dynamic tested',
        minify: {
            collapseWhitespace: false
        },
        hash: true,
        template: './src/my-index.html', // Load a custom template (lodash by default see the FAQ for details)
      })
    ]
}

当然还有其他的属性可以配置，参考这里：https://github.com/jantimon/html-webpack-plugin

Stangor

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Webpack3.x 中 html-webpack-plugin的用法

继上篇webpack 入门，安装与配置完后，是时候去把这些绑定好的file放到html中使用，使用!+tab，快速在一个.html文件中创建一个模板(index-manual.html)：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width
复制链接

扫一扫