详解html-webpack-plugin行使

最近在react项目中首次用到了html-webapck-plugin插件，用到该插件的两个首要浸染：

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防备引用缓存的外部文件题目

可以天生建设html进口文件，好比单页面可以天生一个html文件进口，设置N个html-webpack-plugin可以天生N个页面进口

1、安装

cnpm i webpack-plugin -D

2、在webpack.config.json中引用

const path = require('path') const htmlWebpackPlugin = require('html-webpack-plugin') //第一步 module.exports = { entry: path.join(__dirname, './src/main.js'), output: { path: path.join(__dirname, './dist'), filename: 'bundle.js', }, mode: 'development', devServer: { open: true, port: 8080, hot: true, contentBase: 'src' }, plugins: [ new htmlWebpackPlugin({ //第二步 template: path.join(__dirname, './src/index.html'), //指定天生模板的路径 filename: 'index.html' //指定天生页面的名称 }) ] }

3、html-webpack-plugin的浸染

一、在内存中天生一个指定模板的文件，在会见时速率更快
二、自动为指定模板文件添加bundle.js文件

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!