Webpack无法解析node_modules惰性资产

时间:2019-01-11 15:53:34

标签: vue.js webpack vue-cli monorepo

我正在研究vuejs项目,我们正在尝试将外部vue cli应用程序用作库。在这些库中,我们希望能够导出路由器配置,该配置可以将组件延迟加载到这些模块之一中。但是,当我们使用vue-cli-service将其编译到库中并且具有惰性块资产时,我们无法使用webpack对其进行解析。

我觉得这与公共路径或一些简单的配置有关,但是在此阶段,我只是被卡住并用头撞墙。

https://github.com/EvanBurbidge/mono-repo-tester

这是我们正在做的事情的简单概述

App1 -> main app, installs App2, imports { router } from 'app2'
App2 -> library, compiles to common js lib exports router config

app1的控制台输出 see_screenshot_1 来自app2的路由器配置 see_screenshot_2 路由器从app1导入app2 see_screenshot_3

  

/* config.module.rule('js') */ { test: /\.jsx?$/, exclude: [ function () { /* omitted long function */ } ], use: [ /* config.module.rule('js').use('cache-loader') */ { loader: 'cache-loader', options: { cacheDirectory: '/Users/evan/test/node_modules/.cache/babel-loader', cacheIdentifier: '39e7e586' } }, /* config.module.rule('js').use('babel-loader') */ { loader: 'babel-loader' } ] },

2 个答案:

答案 0 :(得分:4)

我想我知道问题出在哪里。

您似乎正在遭受这样一个事实,即与VueJS捆绑在一起的webpack的默认配置不支持您要完成的工作。实际上,很可能 Webpack 不支持您要完成的工作#2471 #6818 #7843

当您将app2编译为UMD并尝试通过导入UMD在app1中使用它时,app2的动态导入将无法解析,因此不会复制到app1的publicPath上。由于它是动态导入,因此编译成功到可以部署应用程序的地步。但是,当您尝试加载应用程序时,它开始抱怨缺少块。

这是解决此问题的一种方法:

app2/package.json

{
  "name": "app2",
  ...
  "main": "src/router.js"
}

app2/src/router.js

const Hey = () => import(/*webpackChunkName: 'app2.Hello.vue' */ './components/HelloWorld.vue')

export default [
  {
    path: '/app2',
    component: Hey,
    name: 'app2.hey'
  }
]

app1/router.js

import app2Router from 'app2'
import Home from './views/Home.vue'

export default new Router([
  mode: 'history',
  ...
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    ...app2Router
  ]
])

通过将main的{​​{1}}或module标记为app2/package.json而不是UMD捆绑软件,您将强制app1构建整个依赖图并包括任何动态检测到的导入。依次导致依赖关系被正确复制。

您还可以使用

获得完全相同的结果
router.js

答案 1 :(得分:0)

据说,此问题已在Webpack 5 https://github.com/webpack/webpack/issues/11127

中得到解决。