web-dev-qa-db-ja.com

webpackでbabel-loaderを使用するときにcacheDirectoryオプションを指定する方法は？

cacheDirectory オプションがbabel-loaderにあります。次の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"
        } )
    ]
} );

どこに行けばいいの？

webpackbabeljs
23
Vladislav Rastrusny

次のように、それを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を指定するとオプションが有効になり、文字列値を指定するとオプションが有効になり、そのディレクトリ名を使用するように設定されます。参照： クエリパラメータ

18
Will Klein

次のようにローダー文字列に追加します。

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

あなたはこのようにそれを行うことができます-

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

node_modules/.cache/babel-loaderフォルダーにキャッシュされます。

ファイルは次のように保存されます-

0065e42bfc1ab4c292dfa71c6a0e924b59ed6a37.json.gz538205e2b3bffa535d934c3d8f2feee4566bfc00.json.gzb17d9d4b73726f4ba7c5797a9959546fb3d72d69.json.gz

JSファイルごとに異なるキャッシュファイル。

ここでドキュメントを参照してください- https://webpack.js.org/loaders/babel-loader/#options

0
Vivek Kumar