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