javascript - 为什么webpack编译成功但是编译输出中没有我的源代码?
问题描述
我vue-cli-service serve
用来编译 scss 并捆绑输出
这是我里面的webpack配置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',
}
}
这是我的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-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',
}
}
推荐阅读
- python - 在 Python 中对多级 orderdict 进行排序?
- javascript - VueJS - 如何处理多组复选框,使用 v-for 呈现
- groovy - JIRA ScriptRunner 的自定义脚本字段
- jupyter-notebook - 在 Jupyter Book 中使用 pdflatex 构建器时,如何获得要显示的图表?
- node.js - Firebase Cloud Functions 通用功能在部署单个功能时未更新
- python - 给定的字符串没有在python中转换成camelCase?
- python - Python 解释 JSON 值以输入和提取所需的输出
- javascript - 如何在 React 中使用 recharts 和 100% 拉伸宽度来定位 xAxis 上的所有日期?
- r - 如何解决 Jupyter notebook 中 R 的绘图问题?
- latex - 返回小型大写字母和 10pt 字体大小的数字的命令