這篇必須寫，媽的， 我很像罵人，為啥，因為網上配置他媽的老出錯！

還有一些教程也配置不過關，所以我寫了這篇文章，讓 小白少走彎路！

webpack 配置，一般都是版本不相容或者匹配的問題，所以我採用都是指定版本

好，開始！

1, node 安裝

 版本8.xx 以上這個簡單，不說了

2， 安裝webpack 

npm install [email protected] -g

npm install [email protected] --save-dev

npm install [email protected] -g

上面就搞定了初步的安裝，下面就要安裝bable 等別的loader

C:\Users\Administrator\Desktop\kitty>npm install --save-dev babel-preset-es2015 npm WARN deprecated [email protected]: �  Thanks for using Babel: we re commend using babel-preset-env now: please read babeljs.io/env to update! npm WARN [email protected] requires a peer of @babel/[email protected]

^7.0.0 but none is in stalled. You must install peer dependencies yourself. npm WARN [email protected] No description npm WARN [email protected] No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fse vents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for

[email protected] 1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"} )

+ [email protected] added 40 packages from 6 contributors and audited 4806 packages in 21.862s found 0 vulnerabilities

C:\Users\Administrator\Desktop\kitty>webpack

Webpack is watching the files…

Hash: ef04c3db40abca09db51 Version: webpack 3.6.0 Time: 54ms  Asset     Size  Chunks             Chunk Names all.js  5.37 kB       0  [emitted]  main    [0] ./app/main.js 2.9 kB {0} [built] [failed] [1 error]

// 下面就是版本不相容！！

ERROR in ./app/main.js Module build failed: Error: Cannot find module '@babel/core'  [email protected] requires Babel 7.x (the package '@babel/core'). If you'd like to  use Babel 6.x ('babel-core'), you should install '[email protected]'.     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> (C:\Users\Administrator\Desktop\kitty\node_modules\bab el-loader\lib\index.js:10:11)     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)     at Module.require (internal/modules/cjs/loader.js:636:17)     at require (internal/modules/cjs/helpers.js:20:18)     at loadLoader (C:\Users\Administrator\Desktop\kitty\node_modules\loader-runn er\lib\loadLoader.js:13:17)     at iteratePitchingLoaders (C:\Users\Administrator\Desktop\kitty\node_modules \loader-runner\lib\LoaderRunner.js:169:2)     at runLoaders (C:\Users\Administrator\Desktop\kitty\node_modules\loader-runn er\lib\LoaderRunner.js:362:2)     at NormalModule.doBuild (C:\Users\Administrator\Desktop\kitty\node_modules\w ebpack\lib\NormalModule.js:182:3)     at NormalModule.build (C:\Users\Administrator\Desktop\kitty\node_modules\web pack\lib\NormalModule.js:275:15)     at Compilation.buildModule (C:\Users\Administrator\Desktop\kitty\node_module s\webpack\lib\Compilation.js:149:10)     at moduleFactory.create (C:\Users\Administrator\Desktop\kitty\node_modules\w ebpack\lib\Compilation.js:447:10)     at factory (C:\Users\Administrator\Desktop\kitty\node_modules\webpack\lib\No rmalModuleFactory.js:241:5)     at applyPluginsAsyncWaterfall (C:\Users\Administrator\Desktop\kitty\node_mod ules\webpack\lib\NormalModuleFactory.js:94:13)     at C:\Users\Administrator\Desktop\kitty\node_modules\tapable\lib\Tapable.js: 268:11     at NormalModuleFactory.params.normalModuleFactory.plugin (C:\Users\Administr ator\Desktop\kitty\node_modules\webpack\lib\CompatibilityPlugin.js:52:5)     at NormalModuleFactory.applyPluginsAsyncWaterfall (C:\Users\Administrator\De sktop\kitty\node_modules\tapable\lib\Tapable.js:272:13)     at resolver (C:\Users\Administrator\Desktop\kitty\node_modules\webpack\lib\N ormalModuleFactory.js:69:10)     at process.nextTick (C:\Users\Administrator\Desktop\kitty\node_modules\webpa ck\lib\NormalModuleFactory.js:194:7)     at process._tickCallback (internal/process/next_tick.js:61:11)

C:\Users\Administrator\Desktop\kitty>babel -v You have mistakenly installed the `babel` package, which is a no-op in Babel 6. Babel's CLI commands have been moved from the `babel` package to the `babel-cli`  package.

    npm uninstall babel     npm install --save-dev babel-cli

See http://babeljs.io/docs/usage/cli/ for setup instructions.

C:\Users\Administrator\Desktop\kitty>npm uninstall babel-loader --save-dev npm WARN [email protected]0.0 No description npm WARN [email protected] No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fse vents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected] 1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"} )

removed 19 packages and audited 4769 packages in 6.974s found 0 vulnerabilities

// 這裡先解除安裝，然後制定版本安裝 C:\Users\Administrator\Desktop\kitty>npm install [email protected] --save-dev npm WARN [email protected] No description npm WARN [email protected] No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fse vents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected] 1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"} )

+ [email protected] added 6 packages from 4 contributors and audited 4787 packages in 8.766s found 0 vulnerabilities

C:\Users\Administrator\Desktop\kitty>webpack

Webpack is watching the files…

Hash: 709971fca5c52cce8ebb Version: webpack 3.6.0 Time: 671ms  Asset     Size  Chunks             Chunk Names all.js  2.89 kB       0  [emitted]  main    [0] ./app/main.js 62 bytes {0} [built]    [1] ./app/a.js 250 bytes {0} [built] Hash: ceeb1741ae8ee8828007 Version: webpack 3.6.0 Time: 22ms  Asset     Size  Chunks             Chunk Names all.js  2.88 kB       0  [emitted]  main    [1] ./app/a.js 242 bytes {0} [built]     + 1 hidden module Hash: 59ade6816c93002d8536 Version: webpack 3.6.0 Time: 12ms  Asset     Size  Chunks             Chunk Names all.js  2.87 kB       0  [emitted]  main    [1] ./app/a.js 234 bytes {0} [built]     + 1 hidden module Hash: eb3ba75d84754fd97736 Version: webpack 3.6.0 Time: 23ms  Asset     Size  Chunks             Chunk Names all.js  2.87 kB       0  [emitted]  main    [1] ./app/a.js 230 bytes {0} [built]     + 1 hidden module Hash: 8ce48d1b17fea4d14204 Version: webpack 3.6.0 Time: 22ms  Asset     Size  Chunks             Chunk Names all.js  2.87 kB       0  [emitted]  main    [1] ./app/a.js 226 bytes {0} [built]     + 1 hidden module

再次總結， 

1， webpack 和webpack-cli  要求

2， 其它的東西也要相容，若出現不相容，就解除安裝掉，同時重新以指定版本的形式安裝就行了，這樣就能保證執行成功了！

webpack 打包工具非常牛，但是初學者往往很生氣，因為配置不成功，加油吧！！