3.html-webpack-plugin 使用自己的html模板

• 插件需要引入才能使用。

• 打包html所需的插件

  • html-webpack-plugin: 打包结束后，默认自动生成一个html文件，并把打包生成的js/css自动引入到html文件中

• 更多配置：https://github.com/jantimon/html-webpack-plugin#configuration

1. 安装 html-webpack-plugin 插件

   npm i html-webpack-plugin -D
   

2. 在webpack配置文件webpack.config.js中引入html-webpack-plugin插件

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   

3. 在webpack配置文件webpack.config.js中使用html-webpack-plugin插件

   plugins: [
   		//默认会创建一个空的html文件，引入打包输出的所有资源(JS/CSS)
           new HtmlWebpackPlugin();
       ]
   

4. 在输出文夹(bulid)下得到index.html文件
5. 如果希望以自己html为模板来生成html文件，可以进行如下设置

   plugins: [
           new HtmlWebpackPlugin({
         
         
   			template:'./src/base.html'
   		});
       ]