webpack打包过程出错解决

报错一: 版本问题

这里报错的主要原因是版本问题导致的.

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
    at Function.Module._load (internal/modules/cjs/loader.js:506:25)
    at Module.require (internal/modules/cjs/loader.js:636:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (E:\webpack\node_modules\_webpack-dev-server@3.1.14@webpack-dev-server\bin\webpack-dev-server.js:84:1)
    at Module._compile (internal/modules/cjs/loader.js:688:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:699:10)
    at Module.load (internal/modules/cjs/loader.js:598:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:537:12)
    at Function.Module._load (internal/modules/cjs/loader.js:529:3)

主要查看package.json配置中的webpack 和 webpack-dev-server版本问题, 查看本地安装与全局安装的版本是否一致. 如果不一致重新安装.

自己也试验过很多版本. 测试出一个有效的.你们也可以试试

  "devDependencies": {
    ...

    "webpack": "^3.11.0",
    "webpack-dev-server": "^2.11.1"
  },

直接改版本号, 然后cnpm install / npm install 同步过来. 最后运行服务器命令webpack-dev-server

报错二: 端口冲突

Error: listen EADDRINUSE 127.0.0.1:9000
    at Server.setupListenHandle [as _listen2] (net.js:1286:14)
    at listenInCluster (net.js:1334:12)
    at GetAddrInfoReqWrap.doListen [as callback] (net.js:1460:7)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:62:10)
Emitted 'error' event at:
    at emitErrorNT (net.js:1313:8)
    at process._tickCallback (internal/process/next_tick.js:63:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! wp@1.0.0 dev: `webpack-dev-server`
npm ERR! Exit status 1    //已存在的状态说明端口被占用
npm ERR!
npm ERR! Failed at the wp@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-02-15T05_52_19_563Z-debug.log

这里主要是服务器端口已经被占用, 修改配置换个端口就好了.

module.exports = {
  ...

  devServer: {  //配置服务器端口
    port: 8080,    //自定义端口
    open: true
  },

  ...
}

报错三: 

ERROR in ./src/index.js
Module build failed: Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
......

原因是上面说了babel-core是6.x的版本, babel-loader就要使用7.x的版本. 所以这里babel-loader需要修改为指定版本7.1.5

//package.json

  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",    //修改为指定版本
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    ...
  }

npm i babel-loader@7.1.5 -D

报错四: script指令缺失

npm ERR! missing script: build / prod

这个时候检查一下package.json有没有运行的命令

  "scripts": {
    "dev": "webpack-dev-server",
    "prod": "webpack -p"
  },

没有就重新配置,有的话还报错就关闭ide重新运行项目. 并重新安装

npm i clean-webpack-plugin --save-dev 

具体的依赖包依据你的项目而定.