自动生成html，利用hmtl-webpack-plugin插件
yarn add html-webpack-plugin -D，下载插件
yarn add html-webpack-plugin -D
在webpack.config.js引入插件，书写：const HtmlWebpackPlugin = require('html-webpack-plugin')
配置插件，书写：plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })
// 绝对路径 const path = require('path') // 引入自动生成html的插件(html-webpack-plugin) const HtmlWebpackPlugin = require('html-webpack-plugin') // 配置webpack的配置文件，需要将配置的对象导出，给webpack使用 module.exports = { // 入口(entry) entry: './src/index.js', // 出口(entry) output: { // 输出的目录必须是一个绝对路径__dirname path: path.join(__dirname, 'dist'), filename: 'bundle.js' }, // 模式(entry) mode: 'development', // 引入插件 plugins: [ new HtmlWebpackPlugin({ template: './public/index.html' }) ] }
yarn build，最后执行webpack打包，就自动生成html文件，以及自动引入js文件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script defer src="bundle.js"></script></head> <body> <h1>Hello World!</h1> </body> </html>
