由于最近在尝试运行npm run build
时出现此错误,原因是在mini-css-extract-plugin中找不到webpack。我不知道是什么原因造成的。
我最近创建了一个发布分支,但是与build仍然可以使用的master分支相比,我没有太多更改(在package.json中)。但是几个星期前(假期之前)它仍然有效,我无法理解这个问题。
Error: Cannot find module 'webpack'
at Function.Module._resolveFilename (module.js:538:15)
at Function.Module._load (module.js:468:25)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (D:\EnviDat\Frontend\envidat_frontend\node_modules\mini-css-extract-plugin\dist\index.js:8:39)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Module.require (module.js:587:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (D:\EnviDat\Frontend\envidat_frontend\node_modules\mini-css-extract-plugin\dist\cjs.js:3:18)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
我已经尝试通过npm install
手动将依赖项安装在node_modules \ mini-css-extract-plugin文件夹中,但是随后我得到了其他无法加载的依赖项。安装它们时。
Module build failed (from ./node_modules/thread-loader/dist/cjs.js):
Thread Loader (Worker 0)
Failed to load plugin import: Cannot find module 'eslint-plugin-import'
Referenced from: D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\@vue\eslint-config-airbnb\node_modules\eslint-config-airbnb-base\index.js
Referenced from: D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\@vue\eslint-config-airbnb\index.js
Referenced from: D:\EnviDat\Frontend_develop\envidat_frontend\.eslintrc.js
at PoolWorker.fromErrorObj (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\thread-loader\dist\WorkerPool.js:262:12)
at D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\thread-loader\dist\WorkerPool.js:204:29
at mapSeries (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\thread-loader\node_modules\neo-async\async.js:3625:14)
at Function.Module._resolveFilename (module.js:538:15)
at Function.resolve (internal/module.js:18:19)
at Plugins.load (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\eslint\lib\config\plugins.js:104:29)
at Array.forEach (<anonymous>)
at Plugins.loadAll (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\eslint\lib\config\plugins.js:165:21)
at loadFromDisk (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\eslint\lib\config\config-file.js:529:35)
at load (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\eslint\lib\config\config-file.js:587:20)
at configExtends.reduceRight (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\eslint\lib\config\config-file.js:453:36)
at Array.reduceRight (<anonymous>)
at applyExtends (D:\EnviDat\Frontend_develop\envidat_frontend\node_modules\eslint\lib\config\config-file.js:431:26)
@ multi ./src/main.js
到那时我迷路了,我可以在线查找所有内容,因此我重新安装了所有的node_modules,结果仍然相同。另外,我尝试使用npm ci
进行全新安装,仍然是同样的问题。
package.json中的依赖项:
"dependencies": {
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"core-js": "^2.6.5",
"leaflet": "^1.5.1",
"leaflet.gridlayer.googlemutant": "^0.7.0",
"m-markdown-preview": "^1.0.0",
"material-design-icons-iconfont": "*",
"seedrandom": "^2.4.3",
"skeleton-placeholder": "^1.0.0",
"ssri": "^5.3.0",
"vue": "^2.6.10",
"vue-infinite-loading": "^2.4.4",
"vue-router": "^3.0.3",
"vue2-filters": "^0.7.0",
"vuetify": "^1.5.5",
"vuex": "^3.0.1",
"vuex-localstorage": "^1.0.0"
},
"devDependencies": {
"@mdi/font": "^3.8.95",
"@storybook/addon-actions": "^4.1.0 || ^5.0.0",
"@storybook/addon-knobs": "^4.1.0 || ^5.0.0",
"@storybook/addon-links": "^4.1.0 || ^5.0.0",
"@storybook/addon-notes": "^4.1.0 || ^5.0.0",
"@storybook/addon-viewport": "^5.1.9",
"@vue/cli-plugin-babel": "^3.9.0",
"@vue/cli-plugin-eslint": "^3.9.2",
"@vue/cli-service": "^3.9.0",
"@vue/eslint-config-airbnb": "^4.0.0",
"babel-eslint": "^10.0.1",
"css-loader": "^3.1.0",
"eslint": "^5.16.0",
"eslint-import-resolver-babel-module": "^5.1.0",
"eslint-plugin-vue": "^5.0.0",
"node-sass": "^4.12.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-url": "^8.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-storybook": "^0.6.1",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.0.5"
},
完整的package.json在这里: https://github.com/EnviDat/envidat_frontend/blob/release/Navigation_integration/package.json
还有vue.config.js:
module.exports = {
publicPath: './',
assetsDir: './static',
runtimeCompiler: true,
css: {
modules: false,
sourceMap: true,
},
pluginOptions: {
storybook: {
allowedPlugins: ['define'],
},
},
};
答案 0 :(得分:1)
因此,我删除了package-lock.json,npm告诉我缺少的依赖项。我安装了这些。当我运行构建时,它需要有关eslint-loader的更多信息。
总结:
npm install --save-dev webpack html-webpack-plugin typescript vue-loader babel-loader eslint-plugin-import eslint-import-resolver-webpack
和
npm run build
屈服
DONE Build complete. The dist directory is ready to be deployed.
虽然并没有真正回答这个问题://
答案 1 :(得分:0)
尝试运行
npm i -g webpack webpack-cli
看看是否有效