webpack + babel 环境搭建（图片点击就可以放大查看）

这篇必须写，妈的， 我很像骂人，为啥，因为网上配置他妈的老出错！

课程地址： 廖雪峰j2ee分布式架构师第一期大神课程来了

还有一些教程也配置不过关，所以我写了这篇文章，让 小白少走弯路！

webpack 配置，一般都是版本不兼容或者匹配的问题，所以我采用都是指定版本

好，开始！

1, node 安装

 版本8.xx 以上这个简单，不说了

2， 安装webpack 

 

npm install webpack@3.6.0 -g

npm install webpack@3.6.0 --save-dev

npm install webpack-cli@3.0.0 -g

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

C:\Users\Administrator\Desktop\kitty>npm install --save-dev babel-preset-es2015
npm WARN deprecated babel-preset-es2015@6.24.1: �  Thanks for using Babel: we re
commend using babel-preset-env now: please read babeljs.io/env to update!
npm WARN babel-loader@8.0.4 requires a peer of @babel/core@^7.0.0 but none is in
stalled. You must install peer dependencies yourself.
npm WARN kitty@1.0.0 No description
npm WARN kitty@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)

+ babel-preset-es2015@6.24.1
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'
 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'.
    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 kitty@1.0.0 No description
npm WARN kitty@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
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 babel-loader@7 --save-dev
npm WARN kitty@1.0.0 No description
npm WARN kitty@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fse
vents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@
1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}
)

+ babel-loader@7.1.5
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 打包工具非常牛，但是初学者往往很生气，因为配置不成功，加油吧！！

 

对应的文件夹

 

运行打包，就项目根目录

 

webpack 就行了