webpack配置HtmlWebpackPlugin

webpack初步配置参照 https://blog.csdn.net/qq593249106/article/details/84892069
demo地址: https://github.com/Lkkkkkkg/react-demo
当前目录结构:

|- /dist //用于放打包后文件的文件夹
  |- bundle.js //出口文件
  |- index.html //模板文件
|- /node_modules
|- /src //用于放源文件的文件夹
  |- index.js //入口文件
|- package.json
|- webpack.config.js //webpack配置文件

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack-demo06</title>
</head>
<body>
<script src="bundle.js"></script> <!--这是手动引用的bundle.js-->
</body>
</html>

先前配置的 index.html 中, 手动引用了bundle.js, 如果有多个入口文件, 则需要手动添加不同的出口文件, 会比较麻烦, 使用 HtmlWebpackPlugin 插件就可以使用模板生成html文件, 这个html文件会自动引用出口文件

安装 HtmlWebpackPlugin 插件

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

配置 webpack.config.js

要使用 HtmlWebpackPlugin , 不但要安装, 还需要在 webpack 配置文件中配置 plugins 使用这个插件:
webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: './src/index.js',
    plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
        new HtmlWebpackPlugin({
            filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录，如：assets/admin.html
            title: 'Form HtmlWebpackPlugin', //设置生成的HTML的title
        })
    ],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

修改一下index.html, 不再手动引用出口文件bundle.js, 重新构建看看会发生什么:
index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>webpack-demo06</title>
</head>
<body>
<!--<script src="bundle.js"></script> 不再手动引入出口文件-->
</body>
</html>

重新构建

终端输入 npm run build , 打开index.html:
webpack配置HtmlWebpackPlugin
打包成功, 可以注意到 title 变成了 Form HtmlWebpackPlugin, 这时 dist 目录下的 index.html 已经被 HtmlWebpackPlugin 插件生成的 index.html 所替换:
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Form HtmlWebpackPlugin</title>
  </head>
  <body>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

测试多入口文件

在 src 目录下添加多一个 print.js:
print.js

export default function printMe() {
  console.log('I get called from print.js!');
}

当前目录结构如下:

|- /dist //用于放打包后文件的文件夹
  |- bundle.js //出口文件
  |- index.html //模板文件
|- /node_modules
|- /src //用于放源文件的文件夹
  |- index.js //入口文件1
  |- print.js //入口文件2
|- package.json
|- webpack.config.js //webpack配置文件

修改一下 index.js , 在 index.js 中引用 print.js:
index.js

import _ from 'lodash';
import printMe from './print.js';

function component() {
    var element = document.createElement('div');
    var btn = document.createElement('button'); //新建一个button对象

    element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的语法

    btn.innerHTML = 'Click me and check the console!'; 
    btn.onclick = printMe; //button触发的事件是引用的print.js暴露的事件

    element.appendChild(btn); //把button对象插入div中

    return element;
}

document.body.appendChild(component());

配置 webpack.config.js

配置多个入口文件:
webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: {
        app: './src/index.js', //多个入口文件
        print: './src/print.js'
    },
    plugins: [ //webpack 通过 plugins 实现各种功能, 比如 html-webpack-plugin 使用模版生成 html 文件
        new HtmlWebpackPlugin({
            filename: 'index.html', //设置生成的HTML文件的名称, 支持指定子目录，如：assets/admin.html
            title: 'Form HtmlWebpackPlugin', //设置生成的HTML的title
        })
    ],
    output: {
        filename: '[name].bundle.js', //根据入口文件输出不同出口文件
        path: path.resolve(__dirname, 'dist')
    }
};

重新构建

终端输入 npm run build , 打开index.html:
webpack配置HtmlWebpackPlugin
成功打包, 此时 index.html 也发生了相应的变化:
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Form HtmlWebpackPlugin</title>
  </head>
  <body>
  <script type="text/javascript" src="app.bundle.js"></script>
  <script type="text/javascript" src="print.bundle.js"></script></body>
</html>