web-dev-qa-db-ja.com

webpackを使用してコンパイル時にファイルを置き換えるにはどうすればよいですか？

Miltiple構成のプロジェクトがあります。最初の設定はconfig.dev.jsいくつかの開発構成を含むファイル。開発モードで使用しています。 2番目の構成はconfig.jsファイル。プロダクションモードで使用しています。

インポートを使用するコードでは、次のようになります。

import * as config from './config.js';

すべてのインポートを書き直さずに、開発で最初の構成ファイルを使用し、本番で2番目の構成ファイルを使用したいと思います。ビルドモードに応じて、この構成を置き換えるにはどうすればよいですか？

javascriptwebpackwebpack-4webpack-loader
6
5tarter

Angular fileReplacements構文を模倣したかったので、Angularのようなconfig.jsonを使用し、構成キーがwebpackに渡すenvと一致する場合は、置換をループして、いくつかのWebpackモジュールルールを作成します。

これはこれまでで最もエレガントなことではありませんが、これが私が最終的に得たものです：

// config.json

{
    "title": "Some Title",
    "configurations": {
        "production": {
            "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.prod.ts"
                }
            ]
        },
        "lan": {
            "fileReplacements": [
                {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.lan.ts"
                }
            ]
        }
    }
}


// webpack.config.js

const appConfig = require('./config.json');



module.exports = (env, argv) => {

    // env.build is like `ng build --prod` as `webpack --env.build=production` 
    const configuration = appConfig.configurations[env.build];
    const fileReplacements = [];

    // Safety Check
    if(configuration && configuration.fileReplacements) {

        // Iterate through replacements
        for(const replacement of configuration.fileReplacements) {
            // create Webpack module rule
            const replace = {
                test: path.resolve(replacement.replace),
                loader: 'file-replace-loader',
                options: {
                    replacement: path.resolve(replacement.with),
                    async: true
                }
            }
            fileReplacements.Push(replace);
        }
    }

    return {
        mode: //...
        entry: //...
        module: {
            rules: [
                {
                    //...
                },
                // Unpack anywhere here
                ...fileReplacements
            ]
       }
    }
}

このようにして、webpackや正規表現のテストをいじり続ける必要はありません。config.jsonの配列に追加するだけです。

2
Jordan Whitfield

Webpackfile-replace-loaderを使用できます

https://www.npmjs.com/package/file-replace-loader

例：

//webpack.config.js

const resolve = require('path').resolve;

module.exports = {
  //...
  module: {
    rules: [{
      test: /\.config\.js$/,
      loader: 'file-replace-loader',
      options: {
        condition: process.env.NODE_ENV === 'development',
        replacement: resolve('./config.dev.js'),
        async: true,
      }
    }]
  }
}
1
S. Owner

これは古い質問ですが、最近同じ問題に遭遇し、webpack.NormalModuleReplacementPluginはもう機能していないようです（または、少なくとも私の場合は、JSONファイルを構成として使用していました）。代わりに、エイリアスを使用した別の解決策を見つけました。

const path = require("path");

modules.export = {
    ...
    resolve: {
        ...
        alias: {
            [path.resolve(__dirname, "src/conf/config.json")]:
                path.resolve(__dirname, "src/conf/config.prod.json")
        }
    }
    ...
}
0
Zer0