详解html-webpack-plugin使用

零五零八

  react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口


1、安装

1. cnpm i webpack-plugin -D
   

复制代码

2、在webpack.config.json中引用

1. const path = require('path')
   
2. const htmlWebpackPlugin = require('html-webpack-plugin') //第一步
   
3. module.exports = {
   
4.     entry: path.join(__dirname, './src/main.js'),
   
5.     output: {
   
6.         path: path.join(__dirname, './dist'),
   
7.         filename: 'bundle.js',
   
8.     },
   
9.     mode: 'development',
   
10.     devServer: {
    
11.         open: true,
    
12.         port: 8080,
    
13.         hot: true,
    
14.         contentBase: 'src'
    
15.     },
    
16.     plugins: [
    
17.         new htmlWebpackPlugin({ //第二步
    
18.         template: path.join(__dirname, './src/index.html'), //指定生成模板的路径
    
19.         filename: 'index.html' //指定生成页面的名称
    
20.         })
    
21.     ]
    
22. }
    

复制代码

3、html-webpack-plugin的作用：
             一、在内存中生成一个指定模板的文件，在访问时速度更快
             二、自动为指定模板文件添加bundle.js文件