webpack配置 babel

本系列主要學習webpack的配置。webpack本身間接的用過很多次，可是本身配置卻沒多少次，因此特意寫寫文章，學習webpack的配置，有不恰當的地方，歡迎指正。此次配置 babel 。

若你對webpack的概念還不瞭解，先查看相應文檔webpack中文文檔

1、初始化一個webpack項目

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

2、新建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

3、集成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做用同樣，使用場景不同。

爲了更簡單明瞭，把依賴的安裝分開，不一次性安裝全部依賴。

一、安裝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 中指定的內容
      }
    ]
  }

二、安裝babel-preset-env

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

新建 .babelrc 文件

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

三、安裝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文件