问答

如何让 webpack 动态打包这个路径?

作者:admin 2021-04-17 我要评论

现在是把modules下的所有路由资源都打包了,我希望的是 每个路由文件分开独立打包。webpack支持吗? 如:modules/creditCard 打一个包 modules/crossBank 打一个...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

现在是把modules下的所有路由资源都打包了,我希望的是 每个路由文件分开独立打包。webpack支持吗?
如:modules/creditCard 打一个包
modules/crossBank 打一个包
等等。。。。

image.png

###

去看看vue-router的懒加载文档

###

楼上的意思是添加注释
image.png

###

楼上的方法看起来不错,值得一试。
在应付同样的需求的时候,我用了一个笨办法(不过我是自己配置 webpack,只能提供一点思路):

    entry: () => {
        const staticPath = './static/source/js/';
        
        // 读取需要打包的所有文件名列表
        // 使用 reduce 文件名列表映射成一个形如 {文件名:文件路径} 的对象
        return fs.readdirSync(staticPath).
        reduce((pre, cur) => {
            pre[cur.match(/([^/]*).[jt]s$/i)[1]] = [resolve(staticPath, cur)];
            return pre;
        }, {});
    },
    output: {
        // 这里的 [name] 对应上面的文件名
        path: resolve('', 'static/dist'),
        filename: 'js/[name].js',
        chunkFilename:'js/[name].js',
        publicPath: resolve('', 'static/dist/')
    },
###
  1. 多入口,会打到一个包的不同目录里
  2. 使用命令,传不同变量,多次调用webpack打包,生成不同的包

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器