Как указать параметр cacheDirectory при использовании babel-loader с webpack?

В babel-loader есть опция cacheDirectory. Я не могу понять, как использовать его со следующей настройкой webpack:

var compiler = webpack( {
    context: path.resolve( __dirname + "/../../" + rootModuleDir + "/" + modules[ module ] ),
    entry: "./index.jsx",
    resolve: {
        root: path.resolve( __dirname + "/../../assets/js/lib/react" ),
        extensions: [ "", ".js", ".jsx" ]
    },
    output: {
        path: targetDir,
        filename: modules[ module ] + ".js"
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader?optional=runtime" }
        ]
    },
    plugins: [
        //new webpack.optimize.UglifyJsPlugin(),
        new webpack.SourceMapDevToolPlugin( {
            filename: "[file].map"
        } )
    ]
} );

Куда он должен идти?

Ответ 1

Вы можете добавить его в конфигурацию babel-loader следующим образом:

loaders: [
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader?optional=runtime&cacheDirectory"
    }
]

Обратите внимание, что вы не должны добавлять =true, это не нужно, и вы установите в cacheDirectory каталог с именем true. Ссылка: использование cacheDirectory завершается с ошибкой

Вы также можете использовать свойство query:

rules: [
    {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
            optional: "runtime",
            cacheDirectory: true
        }
    }
]

При использовании свойства query указание true активирует параметр, а указание строкового значения активирует этот параметр и настраивает его для использования этого имени каталога. Справка: параметры запроса

Ответ 2

Добавьте его в строку загрузчика, например:

module: {
    loaders: [
        { test: /\.jsx?$/, exclude: /node_modules/, loader: "babel-loader?optional=runtime&cacheDirectory=true" }
    ]
},

Ответ 3

Вы можете сделать это так -

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader?+cacheDirectory'
      }
    ]
  } 
};

Ответ 4

Вы можете сделать это так -

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader?+cacheDirectory'
      }
    ]
  } 
};

Он будет кешироваться в node_modules/.cache/babel-loader.

Обратитесь к документации здесь - https://webpack.js.org/loaders/babel-loader/#options