Webpack 和 vue-loader 与依赖项一起工作

Question

I have a privately built dependency that is compiled down to commonjs in my project.

Within the dependency itself, it references a file in my project, a vue file. After building with webpack, and using ssr, it seems to have an issue. It fails to load the vue file.

For clarity, folder structure:

node_modules
    |
    |- dependency
           |
           |-main.js
src
 |
 |-pages
     |
     |-Default.vue
dist
 |
 |-compiledcode.js <- what webpack compiles

Now in main.js of the dependency, I have const vuefile = require('../../src/pages/Default.vue')

The error as displayed by Node once hosting it via ssr:

<template>
^

SyntaxError: Unexpected token '<'

In my webpack i have the following:

module.exports = {
  ...
  module: {    
       rules: [
          {
           test: /\.vue$/,
           loader: 'vue-loader',        
          },
          ...
       ]
   },
   plugins: [
      new VueLoaderPlugin()
      ...
   ]
}

From how I am understanding the error is that vue-loader isn't loading in the file. But I don't even know this is possible to begin with. If there can be clarification on this.

If not possible..

Is it possible to then add a webconfig to the dependency and make it work that way? If so, how do I get my webpack to interact with the dependencies webpack.

Thanks.

Answer 1

can you please show your whole config?

1. set webpack resolve (incl extension resolve)
2. is vue included in main.js? (import vue..)
3. setup alias to prevent paths like '../../src/pages/..'