本系列重要進修webpack的設置。webpack本身間接的用過不少次，然則本身設置卻沒多少次，所以專程寫寫文章，進修webpack的設置，有不適當的處所，迎接斧正。此次設置
babel 。

若你對webpack的觀點還不相識，先查看響應文檔webpack中文文檔

一、初始化一個webpack項目

npm init -y                     // 初始化項目，會增加一個package.json
npm install --save-dev webpack  // 下載webpack，並記錄到package.json的devDependencies中

二、新建webpack.config.js文件

指定進口和出口。

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode:'development'
};

當前項目目次為

dist            // 手動新建，因出口指定為此文件夾。
 |---index.html
src
 |---index.js
package-lock.json
package.json
webpack.config.json

三、集成babel

所須要的依靠：babel-loader、babel-core、babel-preset-env、babel-polyfill、babel-runtime和babel-plugin-transform-runtime

babel-loader：在import或加載模塊時，對es6代碼舉行預處置懲罰，es6語法轉化為es5語法。
babel-core：許可我們去挪用babel的api，可以將js代碼剖析成ast（籠統語法樹），輕易各個插件剖析語法舉行響應的處置懲罰.
babel-preset-env：指定範例，比方es2015，es2016，es2017，latest，env（包括前面悉數）
babel-polyfill：它效仿一個完全的ES2015+環境，使得我們可以運用新的內置對象比方 Promise，靜態要領比方Array.from 或許 Object.assign, 實例要領比方 Array.prototype.includes 和生成器函數（供應給你運用 regenerator 插件）。為了到達這一點， polyfill 增加到了全局局限，就像原生範例比方 String 一樣。
babel-runtime babel-plugin-transform-runtime：與babel-polyfill作用一樣，運用場景不一樣。

為了更簡單明了，把依靠的裝置離開，不一次性裝置一切依靠。

1、裝置babel-loader和babel-core

npm install --save-dev babel-loader babel-core

在webpack.config.js中增加

module: {
    rules: [
      {
        test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"
        // test 相符此正則劃定規矩的文件，運用 loader 去舉行處置懲罰，除了exclude 中指定的內容
      }
    ]
  }

2、裝置babel-preset-env

npm install babel-preset-env --save-dev

新建 .babelrc 文件

//babelrc
{
  "presets": ["env"]
}

3、裝置babel-polyfill

此依靠用於開闢運用，會在全局增加新的要領，會污染全變量。

npm install --save babel-polyfill

在進口文件本文為index.js的頂部增加

import "babel-polyfill"

在webpcak.config.js中將babel-polyfill增加到entry數組中

module.exports = {
  entry: ['babel-polyfill', './src/index.js'],
  ...

終究webpack.config.js為

const path = require('path');

module.exports = {
  entry: ['babel-polyfill', './src/index.js'],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  mode:'development',
  module: {
    rules: [
      {
        test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"
        // test 相符此正則劃定規矩的文件，運用 loader 去舉行處置懲罰，除了exclude 中指定的內容
      }
    ]
  }
};

項目目次為

dist            // 手動新建，因出口指定為此文件夾。
 |---index.html
src
 |---index.js
.babelrc
package-lock.json
package.json
webpack.config.json

到現在位置，用於開闢運用的babel環境已設置好了。
實行

npx webpack --config webpack.config.js

便可在dist中看到打包出來的bundle.js文件

4.babel-runtime 和 babel-plugin-transform-runtime

假如你不是開闢運用，而是開闢供應給第三方應用的框架的話，將第3步的polyfill改成這兩個依靠。它們在部分增加新要領，不污染全局變量

npm install --save-dev babel-runtime babel-plugin-transform-runtime

.babelrc文件

{
  "presets": ["env"],
  "plugins": ["transform-runtime"]
}

用於開闢框架的babel環境已設置好，
一樣實行

npx webpack --config webpack.config.js

便可在dist中看到打包出來的bundle.js文件