如果你的是用 vue-cli 生成你的 vue 项目,意味着生成的项目的默认 webpack 配置几乎不需要做什么修改,你通过 npm run build 就能得到可以用于发布的 /dist 文件夹,里面包含着一个 index.html 文件和 build 出来的 output 文件。如果打开 /dist/index.html 文件,大概你看到的是类似于这样:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Output Management</title>
</head>
<body>
<script type="text/javascript" src="index.65580a3a0e9208990d3e.js"></script>
<script type="text/javascript" src="main.3d6f45583498a05ab478.js"></script>
</body>
</html>
这里值得注意的一点是,文件里面的 index.65580a3a0e9208990d3e.js 和 main.3d6f45583498a05ab478.js,在每次执行 npm run build
之后这两个文件的文件名里面的 hash 值是可能变化的,而我们不可能每次都手动去修改这个 index.html 文件所引用的文件的名字吧?所幸,有这么一个 plugin 能帮我们做这件事,他就是:html-webpack-plugin
。
简单地来说我们需要 html-webpack-plugin 能做 2 件事:
- 生成用于发布的 index.html 文件
- 自动替换每次 build 出来的 output 文件
说了那么多也是废话,直接看代码来得直接:
一:安装 html-webpack-plugin
npm install --save-dev html-webpack-plugin
二:配置 webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
main: './src/main.js'
},
output: {path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js',
},
plugins: [new HtmlWebpackPlugin({})
]
}
执行
npm run build
得到:
打开 dist/index.html 文件看下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="index.65580a3a0e9208990d3e.js"></script>
<script type="text/javascript" src="main.3d6f45583498a05ab478.js"></script>
</body>
</html>
在我们的 webpack.config.js 文件里,我们只是 new HtmlWebpackPlugin({}),没有给 HtmlWebpackPlugin 任何参数。可以看到 HtmlWebpackPlugin 做了 2 件事:
1:HtmlWebpackPlugin 会默认生成 index.html 文件, 放到我们的 dist/ 目录下面
2:dist/index.html 会自动更新我们每次 build 出来的文件
在进行更多的探讨之前,我们有必要来先看看现目前项目的结构:
可以看到截止到目前我们的项目里面是没有任何 html 源文件的。
三:添加源文件 index.html
上一步呢我们只是 new 了一个没有任何参数的 HtmlWebpackPlugin。其实 HtmlWebpackPlugin 有很多参数可以使用,下面我们介绍比较常用的几个。
1:我们先在项目的根目录下添加一个 index.html 源文件,里面的内容是:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html source file</title>
</head>
<body>
</body>
</html>
2: 修改 webpack.config.js,给 HtmlWebpackPlugin 添加参数:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
main: './src/main.js'
},
output: {path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js',
},
plugins: [
new HtmlWebpackPlugin({
filename: 'html/example.html',
template: 'index.html'
})
]
}
执行
npm run build
得到:
配置里面的:
new HtmlWebpackPlugin({
filename: 'html/example.html',
template: 'index.html'
})
filename
filename 可以配置最后生成的文件名字,甚至可以给一个带父文件夹路径的,比如这里的‘html/example.html’。
template
template 可以配置最后的 html 文件的源文件。例如这里,我们使用根目录下的 index.html,最后生成的 dist/html/example.html 文件其实是以这里的 index.html 为源文件的,这一点可以从 dist/html/example.html 和 index.html 的 <title> 一样看出来。
关于 html-webpack-plugin 更多的配置可以参考它的 github: