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

来源：互联网发布：java socket 怎么使用编辑：程序博客网时间：2024/06/01 23:28

继上篇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 --watchWebpack is watching the files…Hash: 6278eacd9eed27d40b5cVersion: webpack 3.8.1Time: 429ms        Asset       Size  Chunks             Chunk Namesapp.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 --watchWebpack is watching the files…Hash: 1b384847a4e4c83b21b1Version: 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

阅读全文

0 0