webpack- html-webpack-plugin

时间 2019-12-13

标签 webpack html plugin 栏目 HTML 繁體版

原文原文链接

若是你的是用vue-cli生成你的vue项目，意味着生成的项目的默认webpack配置几乎不须要作什么修改，你经过npm run build就能获得能够用于发布的/dist文件夹，里面包含着一个index.html文件和build出来的output文件。若是打开/dist/index.html文件，大概你看到的是相似于这样：javascript

<!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件事：html

生成用于发布的index.html文件
自动替换每次build出来的output文件

说了那么多也是废话，直接看代码来得直接：
一：安装html-webpack-pluginvue

npm install --save-dev html-webpack-plugin

二：配置webpack.config.jsjava

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({
        })
    ]
}

执行webpack

npm run build

获得：

打开dist/index.html文件看下：git

<!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件事：github

1： HtmlWebpackPlugin会默认生成index.html文件, 放到咱们的dist/目录下面
2：dist/index.html会自动更新咱们每次build出来的文件
在进行更多的探讨以前，咱们有必要来先看看现目前项目的结构：web

能够看到截止到目前咱们的项目里面是没有任何html源文件的。vue-cli

三：添加源文件index.html
上一步呢咱们只是new了一个没有任何参数的HtmlWebpackPlugin。其实HtmlWebpackPlugin有不少参数能够使用，下面咱们介绍比较经常使用的几个。npm

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：