webpack构建了不相关的文件夹

原创

shirishiyue

发布于 2019-05-16 18:26:12

74900

代码可运行

文章被收录于专栏：全栈码全栈码

运行总次数：0

代码可运行

某次开发完后，构建，发现一个小应用，怎么构建出来这么多chunk文件？

，这么多文件，而且看里面很多1k的小文件，打开看看如下：

竟然把md文件，index.html等杂七杂八的文件都打包了。而且，还有一些，不是本项目的文件也打包了！

以为是多入口，或者循环引用导致的，检查了一遍，并没有。

搜了很久，原来是import和require的问题。

用webpack写import 和 require 跟nodejs里面的，真的完全不一样啊。

比如，我想动态的导入一个文件：

import('./app'+path+'/util') => /^\.\/app.*\/util$/

抱歉，这个行不，webpack是静态的，不不知动态的path是哪些值，所以，它把 path当做 * ，去全部匹配了，因此会把所有类型的文件打包！！！

require也一样，参考：stackoverflow,

参考：https://webpack.js.org/guides/dependency-management/#require-context

我的代码里面是这个路由动态组件写法导致的：

 function loadComponents (route) {
     if(route.meta && route.meta.noLazyload){
         return import('src/'+route.comppath);
     }else{
         // route level code-splitting
         // this generates a separate chunk (about.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
         return () => import('src/'+route.comppath);
     }
 }

改写到路径配置里面：

    {
        path:'/test',
        comppath: '20190418huya/views/test.vue',
        name:'test',
        title:'测试',
        meta: {
            needLogin: true,
        },
        component: () => import('20190418huya/views/test.vue'),   //import字面量
    },

原则是：尽量使用字面量，少用变量！！！

但是，另一个地方没问题：

export function createApp(){
    const App           = require('src/'+process.env.VUE_APP_DIR+'/App.vue').default;
    const createStore   = require('src/'+process.env.VUE_APP_DIR+'/store/index.js').createStore;
    const createRouter  = require('src/'+process.env.VUE_APP_DIR+'/router/index.js').createRouter;
    ...

原因：这里用的是webpack环境变量，，环境变量在构建时会被转换成明确的字符，所有没问题。

因此，你可以多用环境变量。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

vue.js