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.