Why does webpack compile successfully but my source code does not exist in the compiled output?

Question

I use vue-cli-service serve to compile scss and bundle the output

This is my webpack configuration inside vue.config.js

  configureWebpack: {
    entry: {
      main: [`${process.cwd()}/src/main.js`],
      app: [`${process.cwd()}/src/vue.js`]
    },
    plugins: [
      new BundleTracker({ path: "../static/dist", filename: 'webpack-stats.json' }),
    ],
    output: {
      filename: '[name]-[hash].js',
    }
  }

this is my package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "jquery": "^3.6.0",
    "openseadragon": "^2.4.2",
    "vue": "^2.6.11",
    "regenerator-runtime": "^0.13.7",
    "vue-apollo": "^3.0.0-beta.11",
    "vuex": "^3.6.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.13",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.32.8",
    "sass-loader": "^10.1.1",
    "vue-template-compiler": "^2.6.11",
    "webpack-bundle-tracker": "^0.4.3",
    "@babel/core": "^7.13.16",
    "@babel/eslint-parser": "^7.13.14",
    "graphql-tag": "^2.9.0",
    "vue-cli-plugin-apollo": "~0.22.2"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

The problem

The problem arose over time.

At first npm run serve did not produce the correct bundled output, but compiled successfully. Eg a simple console.log statement was not present in the output file. npm run build compiled successfully though .

I tried to identify the cause, and removed the latest code, and replaced it with multiple console.log statements. I realized that when duplicating console.log('hello') 8 times it worked, but 9 times it didn't !

I was ok with that for some days, because at least npm run build ran correctly, but now even that doesn't work anymore after the codebase grew by a few new files.

I am totally baffled and I have no idea where to start searching for an error! Please help!

I am not a javascript expert, and I only have little experience with webpack, that's why I can't even formulate the problem correctly. Any hint would be appreciated!

Answer 1

I found out the issue by using vue-cli-service inspect (eg npx vue-cli-service inspect )

This showed me that the webpack entries looked like this:

### WRONG
entry: {
  app: [
    './src/main.js',
    '<directory path>/src/vue.js'
  ],
  main: [
    '<directory path>/src/main.js'
  ]
}

so webpack expected both in app and main entrypoint to read the ./src/main.js file. It seems like vue-cli assumes it should be this way.

So I changed my webpack config to this:

### THIS WORKS
entry: {
  app: [
    './src/main.js',
    '<directory path>/src/main.js'
  ],
  otherstuff: [
    '<directory path>/src/index.js'
  ]
}

Now I don't have the problem anymore.

So this is what my vue.config.js looks like now:

  configureWebpack: {
    entry: {
      app: [`${process.cwd()}/src/main.js`],
      otherstuff: [`${process.cwd()}/src/index.js`]
    },
    plugins: [
      new BundleTracker({ path: "../static/dist", filename: 'webpack-stats.json' }),
    ],
    output: {
      filename: '[name]-[hash].js',
    }
  }