装载机入门

首先，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"