webpack 本身只能了解.js 以及.json 类文件,因而要打包 html 文件则须要插件来实现
plugins: html-webpack-plugin
应用步骤:
1、下载
npm install html-webpack-plugin -D (- D 是 --save-dev 的缩写)
2、在 webpack.config.js 中引入
引入插件:const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
3、应用 – 在 webpack.config.js 中如下配置
plugins: [
// 默认会在打包好的文件夹中生成一个空 html 文件,主动引入打包好的资源文件(js/css),文件名默认叫 index.html
new HtmlWebpackPlugin()]
打包后
4、自定义打包规定
plugins: [
// 自定义 options, 指定须要打包的 html 文件,曾经打包后的命名等
new HtmlWebpackPlugin(options:{
template: './src/index.html',// 须要打包的 html 文件门路
filename: 'demo.html', // 打包后的文件名
minify: true // 是否压缩文件,true 为压缩
})
]
打包后
打包好的 html 曾经主动引入打包好的资源文件
打包多个 HTML 文件,chunk 中引入的 js 有先后顺序
打包后的文件夹