webpack打包html资源

webpack自身只能理解.js以及.json类文件，因此要打包html文件则需要插件来完成

plugins: html-webpack-plugin
使用步骤：
1、下载

npm install html-webpack-plugin -D    (-D是--save-dev的缩写)

2、在webpack.config.js中引入
引入插件：const HtmlWebpackPlugin = require('html-webpack-plugin');

3、使用--在webpack.config.js中如下配置

plugins: [
      // 默认会在打包好的文件夹中生成一个空html文件，自动引入打包好的资源文件（js/css），文件名默认叫index.html
   new HtmlWebpackPlugin() 
]

打包后

4、自定义打包规则

plugins: [
    //自定义options,指定需要打包的html文件，已经打包后的命名等
    new HtmlWebpackPlugin(options:{
        template: './src/index.html',//需要打包的html文件路径
        filename: 'demo.html',    //打包后的文件名
        minify: true              //是否压缩文件，true为压缩
    })
]

打包后


打包好的html已经自动引入打包好的资源文件

打包多个HTML文件，chunk中引入的js有先后顺序

打包后的文件夹