如何定义Vue打包文件夹下生成的js文件名【设置webpackChunkName】

最新推荐文章于 2024-07-18 15:37:28 发布
最新推荐文章于 2024-07-18 15:37:28 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： 打包部署 文章标签： javascript vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43101443/article/details/130868993
版权

定义Vue打包文件夹下生成的模块的js，css文件名

一、需求效果

/js
在这里插入图片描述
/css
在这里插入图片描述

二、具体操作

1. 格式

import(/* webpackChunkName: "my-chunk-name" */ 'module');

2. 示例

//vue:　router.js
component: () => import(/* webpackChunkName: "appointment" */"@/pages/Appointment")

在这里插入图片描述

3. 作用

每个模块按照注释中webpackChunkName的值生成对应的模块js

三、关于 webpackChunkName

/* webpackChunkName: '...' */

webpack-Doc: 机票

Make sure to understand the intention:

  • The chunk’s name here is intended to be public.
  • It’s not a development-only name.
  • Webpack will use it to name files in production and development modes.
  • Webpack 5 will automatically assign useful file names in development mode even when not using webpackChunkName.
Amber.Li
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack 的 Chunk，想怎么分就怎么分
小王的技术库
01-28 1627
make：对入口模块分析依赖，构建 ModuleGraph，对每个模块调用 loader 处理。seal：合并 Module 为 Chunk，合并之后 ModuleGraph 会变为 ChunkGraph。emit：对每个 Chunk 通过模版打印成代码后输出这个编译流程中有很多 hook，通过 tappable 的 api 组织，可以控制回调的同步、异步、串行、并行执行。
vue.config.js配置打包之类操作 webpack（压缩js，css,图片）
shi19970609的博客
12-28 2086
// vue.config.js的基础配置 const path = require('path') const CompressionPlugin = require('compression-webpack-plugin') //js css 压缩 const productionGzipExtensions = ["js", "css", 'scss']; // 需要gzip压缩的文件后缀 const merge = require("lodash.merge"); //对象合并插件 const U.
webpack配置自定义文件打包名称
最新发布
小陈的收藏
07-18 127
[hash] 指的是匹配文件的名字 [hash:10] 指的是问得名字长度为10 [ext] 也就代表字符 '.' [query] 路径后面的参数 //给图片设置导出的文件夹及名字 rules:[{ test: /\.(png|svg|jpg|jpeg|gif)$/i, type: 'asset/resource' , generator:{ filename: 'images/[hash:8][ext][111]'} } ..
webpack修改输出资源的名称和路径06--webpack入门学习
g841805的博客
06-21 262
（注意：需要将上次打包生成的文件清空，再重新打包才有效果）
【webpack】webpack打包之坑 _ webpackChunkName:
SunPeng的博客
06-07 1515
【webpack】webpack打包之坑 _ webpackChunkName:
vue2修改打包后默认名称
m0_46796399的博客
04-21 298
vue2修改打包后目录、名称
在 vue 路由懒加载中给 Webpack Chunks 命名
VITAMIN的博客
04-22 2317
最早的路由定义方式 import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import About from '../views/About.vue' import Login from '../views/Login.vue' Vue.use(VueRoute...
【Webpack动态加载打包chunk命名】
u012632105的博客
02-16 418
webpack动态加载打包chunk命名 - js-coder - 博客园
webpackChunkName
一呀一转转圈
04-15 3783
/*webpackChunkName:"register"*/ 代码分隔出来的js文件名 constRegister=lazy(()=>import(/*webpackChunkName:"register"*/'./views/register'));
webpack 之vue多页面打包（一）（脚手架） 一招学会常年无忧
木子聊前端
06-04 1232
简要说明 本项目基于webpack 打包 vue 开发多页应用，涉及内容各种组件的相互关系，本地开发，测试环境的使用，生产环境的部署，其中包括eslint，webpack插件的使用，和移动端端像素问题，ajax的请求问题处理，内容错综复杂，当然在一个公司你只有部署一次就可以，一次学会10年无忧。 说的简单点就是手动搭建一个多页面脚手架 因此在阅读这篇文章。你需要提前具备或者安装好node npm 基础的东西，需要掌握webpack的基础。node 打包中的常用命令，就可以跟着我一步一步见证多页面是多么舒服
vue-cli打包部署性能优化
weixin_53474595的博客
11-01 485
所以就会造成进入首页时，需要加载的内容过多，时间过长，在浏览器中可能会出现很久的空白页，从而降低用户体验，而运用路由懒加载是将各个模块分开打包，用户查看的时候再加载对应的模块，减少加载的时间，从而打开页面的速度也会变快。在assets文件夹里新建一个fonts文件夹，fonts下新建font.css 和 index.html 以及放入文件.ttf文件。“npm run build”之后，可以发现生成了许多“.gz”格式的文件，这些文件就是压缩后的。vue前端页面里会有很多不同的页面路由组件。
Webpack按需加载打包chunk命名的方法
12-13
前言 最近，遇到复杂h5页面开发，为了优化H5首屏加载速度，想到使用按需加载的方式，减少首次加载的JavaScript文件体积，于是将处理过程在这里记录一下，涉及到的主要是以下三点： 使用Webpack如何做按需加载 filename和chunkFilename的区别 如何命名chunk的名称(webpackChunkName) 1 使用Webpack如何做按需加载 大家都知道Webpack是现在流行的前端打包编译工具，通过模块之间的依赖关系，将代码打包组织到一起。Webpack目前已经到v4.x，不同版本版支持按需加载的方式不同，主要有两种： webpack1.x 中提供了
vue项目部署优化问题
qq_35413855的博客
07-31 971
前言 使用vue、react、angular等技术开发过程中，我们都会遇到以下问题： 首屏加载慢（这个单页面原因引起的，如果真的很在乎，可以考虑服务端渲染） 每一次更新都需要清除浏览器缓存才能看到效果(经常被测试吐槽) 这两个问题可以从很多方面进行优化，今天我就从前端页面部署阶段来优化一下这两个问题。PS：以下内容都基于vue-cli3+。 前端页面文件缓存方案 从vue-cli3打包说起 路由使用按需加载后，打包生成的文件，每一个路由页面都对应一个js和css文件，入口mai.
webpack 使用 保姆级 html css js 打包 处理
lyinshaofeng的博客
11-23 821
webpack 使用 保姆级 html css js 打包 处理
Webpack打包之坑 _ webpackChunkName【魔法注释】
热门推荐
Mr.小灰狼_随笔
04-03 1万+
Webpack打包之坑 _ webpackChunkName【魔法注释】 目录 事件起因 百度查阅 webpackChunkName 结束了
webpack的chunkFilename详细说明
前端精髓
01-25 6515
你知道chunkFilename的作用吗？了解之前，先了解懒加载，动态导入的功能。 通常，一个网页会有自身的侧重点： 1、假如你在 YouTube 上加载一个视频页面，你更关心的肯定是视频而不是评论。所以，这里视频就比评论重要。 2、又比如你在一个新闻网站看一篇文章，你更关心的肯定是文章的文字而不是广告。所以，这里文字就比广告重要。 上面的这些情况，都可以通过优先下载最重要的部分，稍后懒加载剩余部分，从而来提升页面首次加载的性能。在 webpack 中，使用 import() 函数即可实现。 let btn
vue配置打包命令，根据不同开发环境打包成不同的文件夹（默认打包文件为dist）
qq_41147046的博客
09-06 1514
4、在vue.config.js文件中配置根据环境变量打包时的文件名称，默认为dist。1、根据系统使用参数，新增环境变量配置参数以production环境为例。2、创建.env.production文件，并对当前环境系统参数进行配置。3、在package.json文件中配置打包命令。
Vue多环境打包配置，根据命令生成不同打包文件名
Web_chicken的博客
06-24 3977
2.使用env配置文件设置Axios的baseURL 3.配置scripts脚本运行命令模式 在package.json文件下的scripts对象中配置mode
Vue项目打包后都产生了哪些JS请求
weixin_46769087的博客
04-13 1511
如果我们关注性能优化，会注意到vue项目在打包后，会产生若干js请求文件，如或本文将深入探讨Vue项目打包后产生的文件都是什么。注：vue打包后和vue项目直接本地运行后产生的js请求文件一致，为了方便展示，本文采用本地启动项目后产生的文件进行探讨。
vue3读取文件夹下所有文件名
06-10
要读取文件夹下所有文件名，可以使用Node.js的fs模块。以下是一个使用fs模块获取文件夹下所有文件名的Vue3代码示例： ```javascript <template> <div> <ul> <li v-for="fileName in fileNames" :key="fileName">{{ fileName }}</li> </ul> </div> </template> <script> import fs from 'fs'; export default { data() { return { fileNames: [], }; }, mounted() { const folderPath = './path/to/folder'; // 文件夹路径 fs.readdirSync(folderPath).forEach((file) => { this.fileNames.push(file); }); }, }; </script> ``` 上面的代码中，mounted钩子函数中使用fs模块的readdirSync方法读取文件夹下的所有文件名，并将它们添加到Vue实例的fileNames数组中。然后使用v-for指令渲染文件名列表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值