分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

Vue系列之 => html-webpack-plugin的两个基本作用

发布时间:2023-09-06 02:29责任编辑:白小东关键词:webpack

安装

npm i html-webpack-plugin -D

webpack.config.js

const path = require(‘path‘);//启用热更新的第二步,导入webpackconst webpack = require(‘webpack‘);//导入在内存中生成html页面的插件,只要是插件,都要放到plugins节点中去const htmlWebpackPlugin = require(‘html-webpack-plugin‘);module.exports = { ???entry: path.join(__dirname, ‘./src/main.js‘), ???output: { ???????path: path.join(__dirname, ‘./dist‘), ???????filename: ‘bundle.js‘ ???}, ???devServer: { //这是配置webpack-dev-server命令参数的第二种形式 ???????open: true, //自动打开浏览器 ???????port: 3100, //设置端口 ???????contentBase: ‘src‘, //指定托管的根目录 ???????hot: true //启用热更新的第一步 ???}, ???plugins: [ //配置插件的节点 ???????//启用热更新第三步 ???????new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块对象 ???????new htmlWebpackPlugin({ //创建一个在内存中生成html页面的插件 ???????????template : path.join(__dirname,‘./src/index.html‘), //指定模板页面,根据指定的路径生成内存中的页面 ???????????filename : ‘index.html‘ //指定内存中生成的页面的名称 ???????}) ???]}

当使用html-webpack-plugin之后,我们不再需要用手动去处理bundle.js。

Vue系列之 => html-webpack-plugin的两个基本作用

原文地址:https://www.cnblogs.com/winter-shadow/p/10241807.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved