学习webpack4.x - HTML处理

- 学习webpack4.x - 基础配置

- 学习webpack4.x - HTML处理

// 学习webpack4.x - 样式处理（未整理）

// 学习webpack4.x - ES6语法转化（未整理）

// 学习webpack4.x - 全局变量引入（未整理）

// 学习webpack4.x - 图片处理（未整理）

...持续中

=======================================================

HTML处理

有些时候，我们项目里的html一开始没有创建，但是打包的时候呢希望自动生成html入口页面并且这个html文件可以自动引入打包后的JS文件等，而且这个html文件自动被放到打包后的目录中，这种情况下怎么通过webpack配置呢？

注意：开始之前以下内容之前，需要配置一些webpack的基础配置，传送门： 学习webpack4.x - 基础配置

安装插件

安装自动生成html文件需要的插件： webpack-html-plugin

yarn add webpack-html-plugin -D

基本配置

当前目录如下：

下面开始配置webpack.config.js文件：

打开webpack.config.js文件， 引入 webpack-html-plugin 插件，并且在plugin中配置该插件：

let HtmlWebpackPlugin = require('html-webpack-plugin');

//插件配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', //原始文件
      filename: 'index.html', //打包后的文件名称
    })
  ]

尝试运行：

npm run dev

成功！运行后自动生成了build目录，并且在build目录中自动生成了index.html文件，结果如下：

打包后的目录:

浏览器中：