裝載機入門

首先，npm install 為你的專案所需的裝載機。

在 webpack.config.js 中匯出的配置物件內部，module 屬性將儲存所有載入器。

const source = `${__dirname}/client/src/`;

module.exports = {
  // other settings here
  
  module: {
    loaders: [
          {
            test: /\.jsx?$/,
            include: source,
            loaders: ['babel?presets[]=es2015,presets[]=react', 'eslint']
          },
          {
            test: /\.s?css$/,
            include: source,
            loaders: ['style', 'css', 'autoprefixer', 'sass']
          }
        ]
  },
};

在上面的配置中，我們為載入器使用了三種基本設定：

• test： 這是我們使用 RegExp 將載入器繫結到特定擴充套件的地方。第一組載入器正在所有 .js 和 .jsx 檔案上執行。第二組正在所有 .css 和 .scss 檔案上執行。
• include： 這是我們希望我們的載入器執行的目錄。或者，我們可以輕鬆使用 exclude 屬性來定義我們不想包含的目錄。
• 載入器： 這是我們想要在 test 和 include 中指定的檔案上執行的所有載入器的列表。

重要的是要注意，載入器在每個載入器陣列中從右到左執行，並在各個定義中從下到上執行。下面的程式碼將按以下順序執行載入器：sass, autoprefixer, css, style。

loaders: [
  {
    test: /\.s?css$/,
    include: source,
    loaders: ['style', 'css', 'autoprefixer']
  },
  {
    test: /\.s?css$/,
    include: source,
    loaders: ['sass']
  }
]

對於不熟悉 webpack 的開發人員來說，這是一個常見的混淆和錯誤來源。例如，當使用 JSX 和 ES6 語法時，我們想要 lint 程式碼，而不是 lint 我們的 babel 載入器提供的編譯程式碼。因此，我們的裝訂裝載機位於我們的 babel 裝載機的右側。

列出我們的裝載機時，-loader 字尾是可選的。

loaders: ['sass']

……相當於：

loaders: ['sass-loader']

或者，你可以使用 loader 屬性（單數）以及用 ! 字元分隔載入器列表的字串。

loaders: ['style', 'css']

……相當於：

loader: "style!css"