Webpack 4如何动态切割JS注入文件名详解

前言

昨天重新把我们公司的引流页做了二重封装，遇到一个问题。

webpack 切割的时候如何加个可以跟随文件名变化的前缀。

效果图

解决路径

  • GG大法+ webpack官方文档

官方文档还真的有提供对应的知识，说明如下

大体就是就是 [request] 可以拿到实际解析的文件名，来取代默认的索引递增的方式。

代码实现

对应的API官方文档：【magic-comments】

// 注册
const IntroRegister = categoryName => {
 return () => import(/* webpackChunkName:"[request]" */ `@/views/${categoryName}/intro-register/intro-register.vue`);
};

总结

这样做的好处就是文件切割目的达到了,加载的资源文件也清晰，有名字一目了然，而非默认的 0.js,1.js

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • webpack+vue.js快速入门教程

    前言 vuejs--轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 vuejs是个轻量级的mvvm框架, 集合了angular的基本功能,却又比angular更为精简,功能上涵盖了双向绑定.指令.逻辑控制.过滤器.事件监听.函数等.框架的特点使得项目 在状态变更.分页的场景下可以拥有很大的便利--所有的操作只需要变更数组,没有任何的dom操作. webpack--CommonJS的引用和编写方式.loader非常的丰富,包括vue-loader.css-loader.less-loa

  • 详解webpack 如何集成第三方js库

    详解webpack 如何集成第三方js库

    webpack系列目录 webpack 系列 二:webpack 介绍&安装 webpack 系列 三:webpack 如何集成第三方js库 webpack 系列 四:webpack 多页面支持 & 公共组件单独打包 webpack 系列 五:webpack Loaders 模块加载器 webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署 基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com

  • webpack+vue-cli项目中引入外部非模块格式js的方法

    在开发vue的项目(我使用的是vue2),需要添加js,虽然可以通过npm install 安装插件,但是如果有一些插件并没有开源,这时候我们只有脸上宽面条了.所以我更倾向于在webpack中引入外部js文件. 1.直接引用 Note:(红色标注部分) 位置1:将页面中需要用到的js,引入进来,from 后面是该js所在的文件目录: 位置2:需要用到位置一中定义的变量Swiper; 位置3:为防止eslint严格模式下报错,需要将位置2定义的swiper再次调用一下: 以上这篇webpack+v

  • webpack打包js的方法

    webpack打包js的方法

    Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 在代码实践之前,先说一写webpack的基础知识. 1.为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端社区涌现出了很多好的实践方法 模块化,让我们可以把复杂的程序细化为小的文件; 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能

  • webpack+vue.js实现组件化详解

    简介 在vue中实现组件化用到了vue特有的文件格式.vue,在每一个.vue文件就是一个组件,在组件中我们将html,css,js全部写入,然后在webpack中配置vue-loader就可以了. 建立vue组件 在src目录下建立components文件夹,并在其中建立app.vue文件,这样我们项目的目录结构如下: |--dist //webpack打包后生成的文件夹 | |--build.js |--node_modules //项目的依赖所在的文件夹 |--src //文件入口 | |

  • Webpack 4如何动态切割JS注入文件名详解

    Webpack 4如何动态切割JS注入文件名详解

    前言 昨天重新把我们公司的引流页做了二重封装,遇到一个问题. webpack 切割的时候如何加个可以跟随文件名变化的前缀. 效果图 解决路径 GG大法+ webpack官方文档 官方文档还真的有提供对应的知识,说明如下 大体就是就是 [request] 可以拿到实际解析的文件名,来取代默认的索引递增的方式. 代码实现 对应的API官方文档:[magic-comments] // 注册 const IntroRegister = categoryName => { return () => im

  • 基于 D3.js 绘制动态进度条的实例详解

    D3 是什么 D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可视化的.如果你不知道什么是 JavaScript ,请先学习一下 JavaScript,推荐阮一峰老师的教程. JavaScript 文件的后缀名通常为 .js,故 D3 也常使用 D3.js 称呼.D3 提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度.由于

  • vue-cli3中vue.config.js配置教程详解

    前言 vue-cli3推崇零配置,其图形化项目管理也很高大上. 但是vue-cli3推崇零配置的话,导致了跟之前vue-cli2的配置方式都不一样了. 别名设置,sourcemap控制,输入文件位置和输出文件位置和输出的方式,压缩js控制,打包webapck日志分析,externals忽略配置(外部引入),调试的端口配置,proxy接口配置等等的. 有时候还需要我们配置的,因为官方推荐的,并不适用于我们平时的开发所用的. 所以,我的vue.config.js配置是下面这样的.还有一个改hash的

  • Spring quartz Job依赖注入使用详解

    Spring quartz Job依赖注入使用详解 一.问题描述: 使用Spring整合quartz实现动态任务时,想在job定时任务中使用某个service时,直接通过加注解@Component.@Autowired是不能注入的,获取的对象为Null.如下面的代码: @Component @PersistJobDataAfterExecution @DisallowConcurrentExecution public class TicketSalePriceLessThanLowestPri

  • webpack 2.x配置reactjs基本开发环境详解

    本文介绍了webpack 2.x配置reactjs基本开发环境详解,分享给大家,具体如下: 当前webpack版本:2.2:react: 15.4.2 webpack从1.x升级到2.x替换了几个接口,包括module.loaders这样的重要接口已被弃用(详细变更).官网目前已不推荐使用1.x版本,早上折腾一番,根据2.2版本配置了react基本的开发环境,满足不太复杂的web应用开发,后期会逐步优化配置文件. 如果您之前使用过webpack,需要改动的地方并不大.下文假定您没有接触过类似的打

  • 在vue-cli中引入lodash.js并使用详解

    lodash 是一个一致性.模块化.高性能的 JavaScript 实用工具库. 在vue官方文档中使用了lodash中的debounce函数对操作频率做限制.其引入的方式是直接引入了js <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script> 而现在我们使用vue-cli脚手架搭建的项目在这样使用,明显会很不合适.所以我们需要通过npm来安装 $ npm

  • vite.config.js配置入门详解

    vite.config.js配置入门详解

    目录 1 如何创建vite项目? 2 如何让vite项目启动时自动打开浏览器? 3vite启动默认端口为3000?如何更改默认端口? 4 vite如何设置热更新? 5vite中如何配置别名路径? 6 vite中如何设置便捷图片路径引用? 7如何把vite打包以后的js,css和img资源分别分门别类在js/css/img文件夹中? 8 如何通过vite给项目配置多个环境? 9 vite中如何配置多入口,进行多页面开发? 10 如何设置开启生产打包分析文件大小功能?类似webpack-bundle

  • PHP实现动态表单生成工具详解

    PHP实现动态表单生成工具详解

    目录 Form介绍 特点 项目主页链接 安装方法 快速使用 链式操作创建块表单 数组配置创建块表单 行内表单 table表单 表单包含多种input类型,包括 hiiden类型 ,text类型,radio类型,checkbox类型,textarea类型,file类型,select类型等基础类型,手写表单就是累耗时耗力开发销量太低而且代码量大了还容易写出bug,每个页面的表单遇到改动的时候恨不得长十双手去改,于是我自己开发了一个php写的表单生成工具,在业务逻辑通过配置或者链式操作去初始表单结构和

  • AngularJS中使用three.js的实例详解

    AngularJS中使用three.js的实例详解 一.轨迹球的引入问题 一开始我是用下面的方式引如轨迹球,但是会报Trackballcontrols is undefined的错. import * as THREE from 'three'; import * as Trackballcontrols from 'three'; 但其实我是能够在node_module下的threejs的包中找到Trackballcontrols的文件的,我一开始以为是引用的路径没对然后修改路径到对应包下Tr

  • jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解

    jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解

    jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解 1.插件介绍: jquery.json-viewer.js是一款查看json格式数据的jquery插件.它可以将混乱的json数据漂亮的方式展示在页面中,并支持节点的伸展和收缩和语法高亮等功能. 2.代码演示: 1).首先引入jquery和json.viewer.js插件 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js">&l

随机推荐