Thumb 0427

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

by Roy Huang 2017-05-31 06:30 UTC

什麼是 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 叫做 rulesrules 是由物件所組成的一個陣列,每個物件分別告訴 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 的開發筆記

«回文章列表