一个项目要跑起来肯定要有一个入口的 index.html 文件, 而我们目前项目里是不存在这个 html 文件的
我们现在来搞定这个, 也就是开始说的 解析 HTML
这里我会用到 html-webpack-plugin 这个插件
该插件将为你生成一个HTML5文件, 其中会自动用 script 标签引入所有你使用 webpack 打包后生成的 js 文件, 也就是所谓的 webpack 包 / bundle
首先指令安装这个插件
yarn add html-webpack-plugin --dev
然后修改 webpack.config.js 文件如下
const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
},
+ plugins: [
+ new HtmlWebpackPlugin()
+ ]
};
可以看到我们 require 引入了这个插件(plugins) 并且在 webpack.config.js 导出的对象里加上了一个 key 为 plugins 的键值对, 里面调用了 HtmlWebpackPlugin 的构造函数在我们的 webpack 配置里生成了实例
指令运行
node_modules/.bin/webpack
我们就可以在 dist 文件夹下面看到新生成的 index.html 文件, 内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="app.js"></script></body>
</html>
它对 app.js 这个包(bundle)做了自动的引入
但是这样生成出来的 html 文件对我们来说实际是不可控的
我们如果需要特定的 meta 标签或者 title 内容动态设定怎么办?
下面解决下这个问题
修改 webpack.config.js 文件如下
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
},
plugins: [
new HtmlWebpackPlugin({
+ template: './src/index.html'
})
]
};
往 HtmlWebpackPlugin 构造函数里传递了一个对象作为参数
作用是告诉 HtmlWebpackPlugin 插件, 我们以这个 src 文件夹下的 index.html 文件作为模板来生成新的 index.html 文件
那么我们把新建的模板文件 ./src/index.html 设置内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
+ <meta name="viewPort" content="width=device-width,initial-scale=1">
+ <meta name="author" content="TC">
<title>MY WEBPACK</title>
</head>
<body>
+ <div id="app">test</div>
</body>
</html>
项目结构应该如下
- my-webpack
- package.json
- webpack.config.js
- yarn.lock
- /node_modules
- /src
- app.js
- index.html
- /dist
- app.js
- index.html
然后再指令运行
node_modules/.bin/webpack
就会看到在 dist 文件夹下面新生成的 index.html 是以我们的模板文件为原型的, 同时也自动 script 引入了其他包(bundle)
再顺便拓展一下, 把 html 文件里的 title 也搞成由插件来控制
修改 webpack.config.js 文件如下
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'app.js'
},
plugins: [
new HtmlWebpackPlugin({
+ title: 'MY-WEBPACK',
template: './src/index.html'
})
]
};
修改 ./src/index.html 文件如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewPort" content="width=device-width,initial-scale=1">
<meta name="author" content="TC">
+ <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app">test</div>
</body>
</html>
然后再指令运行
node_modules/.bin/webpack
比较简单, 但是关于 HTML 的解析基本操作就是这样了
你还可以在 HtmlWebpackPlugin 里配置 favicon
new HtmlWebpackPlugin({ title: 'MY-WEBPACK', template: './src/index.html', favicon: './src/favicon.ico' })我这里就不写进去了, 懒得找图片
当前项目结构应该如下
- my-webpack
- package.json
- webpack.config.js
- yarn.lock
- /node_modules
- /src
- app.js
- index.html
- /dist
- app.js
- index.html
