首页 html-webpack-plugin用法全解

html-webpack-plugin用法全解

时间: 2023-08-14 19:02:49 浏览: 193

html-webpack-plugin是webpack插件中的一种，它可以简化HTML文件的创建，以及将打包后的JavaScript和CSS文件添加到HTML中。以下是html-webpack-plugin的用法全解： 1. 安装html-webpack-plugin ``` npm install html-webpack-plugin --save-dev ``` 2. 在webpack.config.js中引入html-webpack-plugin ``` const HtmlWebpackPlugin = require('html-webpack-plugin'); ``` 3. 在plugins中添加html-webpack-plugin ``` plugins: [ new HtmlWebpackPlugin({ title: 'My App', //生成的html文件的标题 filename: 'index.html', //生成的html文件的名称 template: './src/index.html', //使用的模板文件路径 minify: { collapseWhitespace: true, //压缩HTML文件 removeComments: true, //删除HTML文件中的注释 removeRedundantAttributes: true, //删除HTML文件中的冗余属性 removeScriptTypeAttributes: true, //删除HTML文件中的script标签的type属性 removeStyleLinkTypeAttributes: true, //删除HTML文件中的style和link标签的type属性 useShortDoctype: true //使用HTML5的简短文档类型声明 } }) ] ``` 4. 使用html-webpack-plugin生成HTML文件在执行webpack命令时，html-webpack-plugin会根据模板文件生成HTML文件，并将打包后的JavaScript和CSS文件添加到HTML文件中。以上就是html-webpack-plugin的用法全解。需要注意的是，模板文件中需要使用ejs语法，例如： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="app"></div> </body> </html> ``` 其中<%= htmlWebpackPlugin.options.title %>会被替换为生成的HTML文件的标题。

阅读全文