⽣成 HTML
html-webpack-plugin，该插件⽤来创建 HTML ⽂件，创建的 HTML ⽂件默认引⼊打包后的所有资源⽂件 复制 HTML 到打包⽬录、确保 HTML 中的路径正确（例如：HTML 标签中的 src ） 详情查看：https://www.npmjs.com/package/html-webpack-plugin 安装 npm i html-webpack-plugin -D # webpack 5 npm i html-webpack-plugin@4 -D # webpack 4 引入 const HtmlWebpackPlugin = require(‘html-webpack-plugin’) 配置 在 webpack.config.js 的 plugins 插件中添加 HtmlWebpackPlugin plugins: [ new HtmlWebpackPlugin() // 添加这⼀⾏ ] 执⾏命令 webpack 给 HTML 添加配置 plugins: [ // ⽤于⽣成 index.html new HtmlWebpackPlugin(), ]设置 HTML 模板
plugins: [ // ⽤于⽣成 index.html new HtmlWebpackPlugin({ template: ‘./src/index.html’, // 指定 HTML 的模板 } ] ] 声明模板 <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <meta name=“viewport” content=“<%= htmlWebpackPlugin.options.vi ewport %>”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Demo</title> </head> <body> <div class=“container”> <h1>Hello Webpack</h1> </div> </body> </html>设置 HTML 配置项
少量配置可以在 HtmlWebpackPlugin 中指定 ⼤量配置建议指定 HTML ⽂件的模板 plugins: [ // ⽤于⽣成 index.html new HtmlWebpackPlugin({ template: ‘./src/index.html’, // 指定 HTML 的模板 title: ‘Webpack Plugin Sample’, // 添加 HTML 的 title meta: { // 添加 HTML 的 mea viewport: ‘width=device-width, initial-scale=1.0’ } }), // ⽤于⽣成 about.html new HtmlWebpackPlugin({ filename: ‘about.html’ // 指定声明的⽂件名,如果有多个模 板，可以实例化多次 }] ]声明 HTML 模板
<!DOCTYPE html> lang=“en”> charset=“UTF-8”> name=“viewport” content=“<%= htmlWebpackPlugin.options.vi ewport %>”> http-equiv=“X-UA-Compatible” content=“ie=edge”>
若有收获，就点个赞吧
0 人点赞
