继上篇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