web-dev-qa-db-ja.com

webpackへの変数の挿入

ファイルごとのJSエラーのデバッグ情報を取得するために、webpackバンドル内の各モジュールに変数を挿入しようとしています。有効にしました

node: {
   __filename: true
}

webpackの現在のファイルパス

私のwebpack.configにありますが、次のようなものを挿入したいと思います

var filename = 'My filename is: ' + __filename;

コンパイルする前に各モジュールに挿入します。 Banner Plugin とrawオプションを見てきましたが、これは、各モジュールにスクリプトを挿入するという私の望ましい結果ではなく、webpackクロージャーの外側にのみバナーを挿入するようです。

javascriptrequirejscommonjswebpack
10
dtothefp

変数を使用して、webpack.config.jsファイル内のいくつかの変数を解決します。

plugins: [
    new webpack.DefinePlugin({
      ENVIRONMENT: JSON.stringify(process.env.NODE_ENV || 'development'),
      VERSION: JSON.stringify(require('./package.json').version)
    })
]

十分に動的ではない可能性がありますが、動的である場合は、そのローダーソリューションをバイパスできる可能性があります。

18
Marcus Nielsen

独自のローダーを作成します。

my_project/my_loaders/filename-loader.js：

module.exports = function(source) {
  var injection = 'var __filename = "' + this.resourcePath + '";\n';
  return injection + source;
};

それをパイプラインに追加し、構成も必ず追加してください。

resolveLoader: {
  modulesDirectories: ["my_loaders", "node_modules"]
}

ローダーの書き方 のドキュメントを参照してください。

2
Ricardo Stuven