新手向 Webpack 完全攻略 (4) – 設定 Loader

By Roy Huang・May 31 2017・技術文章

什麼是 Loader?

Webpack 的主要核心功能是將開發者的 JS 檔案打包成一個檔案，而它也可以利用各種不同的 Loader 來編譯檔案，不僅僅是 JavaScript、就連 CSS 以及圖片都可以利用 Loader 來編譯。假設今天你的 JavaScript 使用 ES6 的語法，而目前並非所有的瀏覽器都兼容 ES6，為了讓每個瀏覽器都可以順利執行我們的 JavaScript，我們就可以利用 Loader 將 ES6 編譯成 ES5 的語法。

目前最常被使用的 Loader 叫做 Babel，它有非常多不同的模組可以運用，在這篇文章當中我們希望可以把 ES6 的語法轉成 ES5 的，我們會使用其中三個模組。

babel-core 這個模組是 babel 的核心，主要負責解析並產出新的原始碼。
babel-loader 這個模組讓 babel 可以和 Webpack 連動。
babel-preset-env babel-preset 就像是一本規則書，負責所有的語法邏輯，例如要如何將 ES6 的語法轉成 ES5 。而 babel-preset-env 裡面包含了所有 ES5, ES6 以及 ES7 的邏輯。設定 Babel

首先，我們必須先安裝這三個模組，因此我們要執行：

  npm install -D babel-core babel-loader babel-preset-env

接著，我們必須在 webpack.config.js 裡面進行設定。

  // webpack.config.js
  // ... other settings above

  output: {
    filename: 'bundle.js',
    path: Path.resolve(__dirname, 'build')
  }, 

  module:  {
    rules: [
      {
        use: "babel-loader",
        test: /\.js$/
      }
    ]
  }

在 output property 的下面，我們新加入一個 property 叫 module。這個設定告訴 Webpack，當啟動的時候要加入這些模組。接著裡面再加入一個 property 叫做 rules。 rules 是由物件所組成的一個陣列，每個物件分別告訴 Webpack 要使用哪些模組去處理哪些檔案。

這裡可以看到，rules 中的第一個物件裡面還有兩個 property。use 告訴 Webpack，我們要使用 babel-loader 這個模組。而 test 則是需要一個 RegExp，這裡的表示每次我們處理 .js 結尾的檔案，都要使用 babel-loader 來編譯。

接下來我們必須在 webpack.config.js 的目錄新增一個名為 .bablerc 的檔案。還記得我們上面提到的規則書嗎？每當 babel 啟動的時候，它就會開始尋找從這個檔案中尋找設定（如果 .bablerc 存在的話），並且用特定的規則來編譯。

// .bablerc

{
  "presets":["babel-preset-env"]
}

這裏很簡單，我們只在裡面加入一個 JSON 物件，然後們指定用 babel-preset-env 作為規則。

到這裡就大功告成了，接著我們只要再執行一次 npm run build ，我們就可以生成新的 bundle.js。如果你打開它，並且移到最下面，你就會發現你的 JavaScript 都變成 ES5 的語法了！

點選查看此章原始碼

此分享轉載自五倍 Rails 工程師 Roy Huang 的開發筆記

新手向 Webpack 完全攻略 (5) – 幫你載入 CSS

用 Redux 跟 GraphQL 玩 Rails 5.1