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

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

image.png

阅读 3.3k
4 个回答

去看看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打包,生成不同的包
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题