babel-webpack簡易安裝使用筆記(更新中)

babel是es6及es2017轉es5的公認好工具，（雖然說是爲了兼容萬惡的ie），接下來爲你們帶來babel-webpack的簡易安裝教程，本人水平有限，若有紕漏或錯誤之處，請與評論區指出，但願你們不吝賜教

看了babel和官網和webpack的文檔，發現好多坑啊，因此在這裏寫一篇文章，但願能幫助你們

環境的配置

babel和webpack的環境比較坑，咱們須要安裝的如下幾個環境：

·babel-loader
·babel-core
·babel-preset-env
·babel-pollyfill
·webpack

若是你沒有裝node，那就先安裝node吧
傳送門：http://www.runoob.com/nodejs/...
國內鏡像（必裝）:https://cnodejs.org/topic/4f9...

那麼開始吧

第一步

npm init -y

或者

npm init

而後本身選擇相應的配置

如今目錄應該是這樣的：

/
——package.json

第二步，安裝上面所提到的幾個環境

npm i -D babel-loader babel-core babel-preset-env babel-polyfill webpack

若是報錯權限不足的話，就再執行一次，暴力膜

如今的目錄結構：

.
|-- node_modules
`-- package.json

安裝完成之後，還須要配置babel環境和webpack的設置

第三步,配置webpack.config.js

在/目錄（根目錄下新建一個webpack.config.js文件，而後複製如下代碼）

const path = require('path');

module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

如今的目錄結構：

.
|-- node_modules
|-- package.json
`-- webpack.config.js

第四步，配置babel預設文件

咱們須要在這一步在根目錄()新建一個.babelrc文件，可是用windows的文件管理器是作不到的，怎麼辦呢？咱們能夠用編輯器或者git bash建立一個文件

echo > .babelrc

好的，如今打開目錄，出現了.babelrc文件，那麼，咱們來配置一下babel的預設環境吧
在.babelrc中粘貼以下代碼：

{
  "presets": ["env"]
}

自此，咱們基本的環境就搭建完畢了,那麼接下來咱們來構建咱們第一個項目吧
如今的目錄結構：

.
|-- node_modules
|-- package.json
|-- .babelrc
`-- webpack.config.js

第五步，新建index.js和index.html文件

在根目錄下新建src目錄和dist目錄

mkdir src dist

在src/目錄下新建一個文件index.js
內容爲

import "babel-polyfill";
let name = 'max';
console.log(Number.isNaN(0));

藍後，在根目錄下面建一個index.html
內容爲

<script src="./dist/bundle.js" charset="utf-8"></script>

好的，至此項目建立完畢，能夠開始編譯了
如今的目錄結構爲：

.
|-- .babelrc
|-- dist
|-- index.html
|-- node_modules
|   `-- .staging
|-- package.json
|-- src
|   `-- index.js
`-- webpack.config.js

index.js文件會編譯成dist目錄裏面的文件，具體的轉換規則在webpack.config.js中，之後更新時會介紹具體用法

第六步，編譯文件

在命令行中輸入
ps:根據下載的方式不一樣可能有不一樣的路徑

node ./node_modules/webpack/bin/webpack.js

完成後會提示

$ node ./node_modules/webpack/bin/webpack.js
Hash: a7e9dbe767d3662fefe0
Version: webpack 3.8.1
Time: 17858ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  264 kB       0  [emitted]  [big]  main
  [89] (webpack)/buildin/global.js 488 bytes {0} [built]
 [124] ./src/index.js 90 bytes {0} [built]
    + 325 hidden modules

那麼恭喜你，基本ok了

而後打開index.html,打開console，若是出現false則安裝好了

本文章正在更新，若是有錯誤或者遇到的地方歡迎在評論區指出，我會盡可能解決問題