webpack，Babel，babel-loader的關系

本文將要介紹 webpack，Babel，babel-loader 的關系。理清楚他們各自做了什么事情。

通常我們新建一個項目，會先配置webpack，然后配置babel；babel是一個編譯工具，實際上，babel也是可以單獨使用的。

下面我們從Babel出發，簡單配置一個react項目，來清晰認識一下webpack和babel的關系。

Babel 和 Webpack 簡介

Babel 是一個 JavaScript 編譯器。（把瀏覽器不認識的語法，編譯成瀏覽器認識的語法。）

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器。（項目打包）

下面會用到的：

名稱	描述
@babel/cli	Babel附帶了一個內置的CLI，可用於從命令行編譯文件。
@babel/core	使用本地配置文件
@babel/preset-env	編譯最新版本JavaScript
@babel/preset-react	編譯react
@babel/polyfill	通過 Polyfill 方式在目標環境中添加缺失的特性
@babel/plugin-proposal-class-properties	編譯 class

開始配置

新建項目

mkdir babel-in-webpack

進入項目

cd babel-in-webpack/

初始化 npm

npm init

不用管提示，一頓回車鍵。然后會生成一個文件 package.json

配置 Babel

安裝 Babel 相關依賴。Babel7將所有包放在了@babel/ 下。

npm install --save-dev @babel/cli @babel/core @babel/preset-env @babel/polyfill

新建文件 babel.config.json

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": []
}

新建文件夾 src，src 內新建文件 test.js，隨便寫點啥es6語法。

使用下面命令編譯

./node_modules/.bin/babel src --out-dir lib

編譯完會新增目錄lib, 里面放着編譯好的文件

配置 React

安裝 Babel 編譯 React 的依賴

npm install --save-dev @babel/preset-react @babel/plugin-proposal-class-properties

babel.config.json 添加 React 相關配置

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

安裝 React 相關依賴

npm install --save react react-dom

src 下新增 react 文件 main.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return (
      <div>Hello World!</div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

運行命令編譯

./node_modules/.bin/babel src --out-dir lib

編譯完成后 lib 下多了一個 main.js

看起來編譯很成功, 我們在 lib 下面新建一個 html 引入 main.js 看看效果

報錯，瀏覽器不認識require，繼續往下看。

配置 webpack

安裝 webpack 依賴

npm install --save-dev webpack webpack-cli

根目錄新建文件 webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  }
};

在 package.json 的 scripts 中加入命令

"build": "webpack --mode development",

運行命令

npm run build

webpack 不認識 react 語法，在 webpack.config.js 中加入 babel-loader。

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.js$/, use: 'babel-loader' }
    ]
  },
  plugins: []
};

安裝依賴 babel-loader

npm install --save-dev babel-loader

運行命令

npm run build

會看到 dist/main.js, 寫個html引入試試

兩種編譯結果對比

我們來看 Babel 編譯結果 lib/main.js 和 webpack 編譯結果 dist/main.js，發現 Babel 僅僅是將 src/main.js 的react語法編譯成了js語法，而 webpack 將 src/main.js 和引入的 node_modules 融合后用 Babel 編譯。

瀏覽器不認識 require，webpack 實現了一套瀏覽器認識的 require。

總結

Babel 是編譯工具，把高版本語法編譯成低版本語法，或者將文件按照自定義規則轉換成js語法。

webpack 是打包工具，定義入口文件，將所有模塊引入整理后，通過 loader 和 plugin 處理后，打包輸出。

webpack 通過 babel-loader 使用 Babel 。

代碼地址：GitHub