加入收藏 | 设为首页 | 会员中心 | 我要投稿 上饶站长网 (https://www.0793zz.com.cn/)- 数据库平台、视觉智能、智能搜索、决策智能、迁移!
当前位置: 首页 > 站长学院 > MsSql教程 > 正文

详解html-webpack-plugin使用

发布时间:2020-09-22 11:39:56 所属栏目:MsSql教程 来源:网络整理
导读:这篇文章主要介绍了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文件

(编辑:上饶站长网)

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

    推荐文章
      热点阅读