Webpack——打包HTML文件

webpack原生只能理解JS和JSON文件，要支持打包其他类型的文件，都需要安装相应的插件或loader。

如果我们需要打包HTML文件，首先需要安装html-webpack-plugin插件：

 npm install html-webpack-plugin -D

webpack的配置

plugins选项用于以各种方式定义webpack构建过程。webpack附带的各种内置插件，可以通过这个选项，在编译时使用这些插件。

安装好html-webpack-plugin插件后，需要在webpack.config.js文件中进行配置：

 // ...
 // 1. 引入插件
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 ​
 module.exports = {
   // ...
   // 2. 在plugins中配置插件
   plugins: [
     new HtmlWebpackPlugin({
       template: 'index.html', // 指定入口模板文件（相对于项目根目录）
       filename: 'index.html', // 指定输出文件名和位置（相对于输出目录）
       // 关于插件的其他项配置，可以查看插件官方文档
     })
   ]
 }

确保入口模板文件的路径和文件名与配置一致，然后可以编译。

多JS入口和多HTML情况的配置

面对需要编译出多个HTML文件，且文件需要引入不同的JS文件，但默认情况下，打包后的HTML文件会引入所有打包后的JS文件，我们可以指定chunk来分配JS。

 const path = require('path');
 // 1. 引入插件
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
   // ...
   // 2. 配置JS入口(多入口)
   entry: {
     vendor: ['./src/jquery.min.js', './src/js/common.js'],
     index: './src/index.js',
     cart: './src/js/cart.js'
   },
   // 配置出口
   output: {
     filename: '[name].js',
     path: path.resolve(__dirname, 'build/js')
   },
   // 3. 配置插件
   plugins: [
     new HtmlWebpackPugin({
       template: 'index.html',
       filename: 'index.html',
       // 通过chunk来指定引入哪些JS文件
       chunk: ['index', 'vendor']
     }),
     // 需要编译多少个HTML，就需要new几次插件
     new HtmlWebpackPlugin({
       template: './src/cart.html',
       filename: 'cart.html',
       chunk: ['cart', 'vendor']
     })
   ]
 }

Tip: 这里需要注意的是要编译多少个HTML文件，就要new几次HtmlWebpackPlugin。

上面的配置编译成功后，输出情况是这样的：

 build
 |__ index.html # 引入index.js和vendor.js
 |__ cart.html    # 引入cart.js和vendor.js
 |__ js
      |__ vendor.js # 由jquery.min.js和common.js生成
      |__ index.js    # 由index.js生成
      |__ cart.js       # 由cart.js生成