为啥webpack编译成功但是编译输出中不存在我的源代码?

Posted

技术标签:

【中文标题】为啥webpack编译成功但是编译输出中不存在我的源代码?【英文标题】:Why does webpack compile successfully but my source code does not exist in the compiled output?为什么webpack编译成功但是编译输出中不存在我的源代码? 【发布时间】:2021-09-08 16:30:56 【问题描述】:

我使用vue-cli-service serve编译scss并打包输出

这是我在vue.config.js里面的webpack配置

  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',
    
  

这是我的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"
  ]

问题

问题随着时间的推移而出现。

起初npm run serve 没有产生正确的捆绑输出,但编译成功。例如。输出文件中没有简单的console.log 语句。 npm run build 编译成功

我试图找出原因,并删除了最新的代码,并将其替换为多个console.log 语句。我意识到,当复制console.log('hello') 8 次有效,但 9 次无效

这几天我没问题,因为至少 npm run build 运行正确,但现在在代码库增加了几个新文件后,即使这样也不再起作用了。

我完全感到困惑,我不知道从哪里开始寻找错误!请帮忙!

我不是 javascript 专家,而且我对 webpack 的经验很少,这就是为什么我什至无法正确地提出问题。任何提示将不胜感激!

【问题讨论】:

您是否尝试过不使用 vue 配置文件,或者将其留空.. 然后尝试构建或服务.. 我认为它错过了默认的构建和服务方式。跨度> 也许是入口点等。也许你可以在 package.json 中配置它,我知道它可以在 package.json 中完成。尝试在 google 中搜索。 【参考方案1】:

我通过使用vue-cli-service inspect(例如npx vue-cli-service inspect)发现了问题

这向我展示了 webpack 条目看起来像这样:

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

所以 webpack 期望在应用程序和主入口点都读取 ./src/main.js 文件。似乎 vue-cli 认为它应该是这样的。

所以我将我的 webpack 配置更改为:

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

现在我没有问题了。

这就是我的vue.config.js 现在的样子:

  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',
    
  

【讨论】:

以上是关于为啥webpack编译成功但是编译输出中不存在我的源代码?的主要内容,如果未能解决你的问题,请参考以下文章

为啥我的visual stdio 2010连错误程序也能编译成功。。。。

为啥即使数据库中不存在 id 和/或用户名我也会成功

为啥有些使用typescript/webpack的项目也使用babel完成编译

为啥我的编译器无法计算出这种转换,它何时存在?

为啥我的编译器对 c 字符串类型的向量存在内存问题?

为啥 Flutter 编译器告诉我我的应用程序不存在?