设置 HtmlWebpackPlugin

首先安装插件

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

编辑 webpakc.config.js

// add
const HtmlWebpackPlugin = require("html-webpack-plugin");
 
// add
plugins: [
new HtmlWebpackPlugin({
   // 选取 './src/index.html' 文件
    template: "./src/index.html",
}),
],

img

我们可以先删除 dist 文件，然后执行npm run build 可以看到重新生成了 dist 文件夹,此时文件结构为

webpack
|- /dist
	|-index.bundle.js
    |-index.html
|- /node_modules;
|- /src
  |- index.html
  |- index.js
|- package-lock.json
|- package.json;
|- webpack.config.js

在浏览器中打开dist文件夹中的index.html 我们可以在页面中看到我们hello webpack,并且控制台中有输出hello webpack img

但是其实我们之前的index.html并没有引入index.js,但HtmlWebpackPlugin会帮我们引入自动引入 去查看打包后的index.html可以找到

<script defer="defer" src="index.bundle.js">