为什么 webpack 编译成功了,但是我的源代码在编译输出中不存在?
Why does webpack compile successfully but my source code does not exist in the compiled output?
我使用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',
}
}
我使用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',
}
}