重庆小潘seo博客

当前位置:首页 > 重庆网络营销 > 小潘杂谈 >

小潘杂谈

详解html-webpack-plugin使用

时间:2020-10-26 20:20:08 作者:重庆seo小潘 来源:
这篇文章主要介绍了html-webpack-plugin使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 最近在react项目中初次用到了html-webapck-plugin插件,用到该插件的两个主要作用: 为html文件中引入的外部资源如s

这篇文章主要介绍了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文件

总结

到此这篇关于详解html-webpack-plugin使用的文章就介绍到这了,更多相关html-webpack-plugin使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

来源:脚本之家