web-dev-qa-db-ja.com

Webpack 2 module.rulesで「use」と「loader」を使用するのはいつですか？

現在のプロジェクトをWebpack2にアップグレードしています。これはWebpack1以前を使用していました。アップグレードに関するチュートリアルをいくつか見てきましたが、一般的には理解できます。

ただし、モジュールルール（ローダー）を指定するときに「use」と「loader」をいつ使用するかわからないという問題があります。最初は、useがloaderに置き換わっていると思いました。私はこのタイプの構文を理解しています：

module: {
  rules: [{
    test: /\.scss$/,
    use: [
      {
        loader: 'postcss-loader',
        options: {
          plugins: ...
        }
      },
      'sass-loader'
    ]
  }]
}

ただし、ExtractTextPluginを使用すると、useを考慮した場合に気に入らないようです。私はこれを試しました：

      {
        test: /\.scss$/,
        use: [
          {
            loader: ExtractTextPlugin.extract({
              fallbackLoader: 'style-loader',
              loader: scssLoaders
            })
          }]
      },

scssLoadersは次のとおりです。

var scssLoaders = [
  {
    loader: 'css-loader',
    options: {
      modules: true,
      importLoaders: '2',
      localIdentName: '[name]__[local]__[hash:base64:5]'
    }
  },
  {
    loader: 'postcss-loader'
  },
  {
    loader: 'sass-loader',
    options: {
      outputStyle: 'expanded',
      sourceMap: true,
      sourceMapContents: true
    }
  }
];

他の問題について話をする前に、ここで停止します。誰かが私がここで欠けているものを説明するのを手伝ってもらえますか？あなたが助ける必要がある他のコードをお気軽にお尋ねください！

前もって感謝します。

webpackwebpack-2
33
TwistedSt

Webpack 2移行チュートリアル に述べられているように、両者の違いは、ローダーの配列が必要な場合、useを使用する必要があることです。 loaderを使用する必要があります：

module: {
   rules: [
      {
        test: /\.jsx$/,
        loader: "babel-loader", // Do not use "use" here
        options: {
          // ...
        }
      },
      {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader"
        use: [
          "style-loader",
          "css-loader",
          "less-loader"
        ]
      }
    ]
  }
42
Albert Olivé

module.rules はローダー用です。 loader としてルールを指定することは、単なるショートカットです。

use: [{loader}]

プラグインの場合、構成で plugins プロパティを使用します。

11
simon04