为啥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连错误程序也能编译成功。。。。