详解html-webpack-plugin使用
2020-09-20 04:09
1276 查看
最近在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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
相关文章推荐
- webpack中安装使用htmlwebpackplugin----
- webpack5-[html-webpack-plugin]的使用
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- html-webpack-plugin详解
- webpack插件:使用HtmlWebpackPlugin在页面中使用EJS语法引用模板文件(二)
- webpack学习之二,管理输出和html-webpack-plugin使用
- [js高手之路]深入浅出webpack教程系列4-插件使用之html-webpack-plugin配置(上)
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- 9.1webpack配置文件以及webpack-dev-server 工具html-webpack-plugin插件使用
- html-webpack-plugin插件的详细介绍和使用
- 详解extract-text-webpack-plugin 的使用及安装
- 使用html-webpack-plugin'入再内存中生成 html 页面插件
- webpack插件html-webpack-plugin详解
- html-webpack-plugin 中使用 title选项设置模版中的值无效
- html-webpack-plugin插件使用chunks属性时报错
- webpack4使用html-webpack-plugin插件
- HtmlWebpackPlugin插件使用实现html文件自动生成
- [js高手之路]深入浅出webpack教程系列6-插件使用之html-webpack-plugin配置(下)
- html-webpack-plugin详解
- 详解html-webpack-plugin用法全解