Webpack4 - JavaScript & Babel

August 24, 2019

上一篇介紹了 Webpack 基礎設定，這次要來介紹 JavaScript ES6 要怎麼使用 Webpack + Babel 來編譯成 ES5

安裝 Babel

npm install babel-loader @babel/core @babel/preset-env --save-dev

babel-loader 讀取檔案格式
@babel/core babel 的核心，主要負責解析並產出新的原始碼
@babel/preset-env 有點像是規則書，裏面包含了 ES5、ES6、ES7 的邏輯，幫助你將語法轉成 ES5

設定 Babel

編輯 webpack.config.js 新增 module

const path = require('path');
module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index.bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
};