babelrc - webpack babel loader

¿Cómo especificar la opción cacheDirectory cuando se usa babel-loader con webpack?

Question

Hay una opción cacheDirectory en babel-loader. No puedo entender cómo usarlo con la siguiente configuración de paquete web:

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"
} )
]
} );

¿Dónde debería ir?

Answer 1

Agréguelo a la cadena del cargador así:

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

Answer 2

Puedes agregarlo a la configuración de babel-loader de esta manera:

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

Tenga en cuenta que no debe agregar =true , eso es innecesario y configurará el cacheDirectory para que use un directorio llamado true . Referencia: el uso de cacheDirectory falla con error

También puede utilizar la propiedad de query :

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

Al usar la propiedad de query , especificar true habilitará la opción, y especificar un valor de cadena habilitará la opción y la configurará para usar ese nombre de directorio. Referencia: Parámetros de consulta.