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有先后顺序
打包后的文件夹