web-dev-qa-db-ja.com

モジュールをWebpackミニフィケーションから除外する

単一ページのアプリケーションでWebPackを使用しています。アプリケーションは多くの環境に展開されます。特定の環境でアプリケーションが特定のエンドポイントを呼び出す必要があるという要件があります。

指定された環境のエンドポイントアドレスを提供するには、環境モジュールが必要です。これが現在の解決策です（多くあり、これは問題のポイントではありません）。ただし、展開プロセスの一部として上書きできるように、config.jsを縮小から除外する必要があります。

Config.jsは次のようになります。

module.exports = {
    env: {
        endpointUrl: 'http://1.2.3.4',
        authUrl: 'http://5.6.7.8'
    }
};

また、次を使用して参照されます。

const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;

WebPackの構成は次のようになります。

var webpack = require('webpack');
​
module.exports = {
    entry: {
        main: './src/js/main.jsx',
        login: './src/js/login-main.jsx'
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [{
            test: /.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            plugins: ['transform-react-jsx'],
            query: {stage: 0}
        }, {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'eslint-loader'
        }]
    },
    plugins: [
        new webpack.ProvidePlugin({
            fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
        }),
        new webpack.DefinePlugin({
            __DEV__: JSON.stringify(JSON.parse(process.env.DEV || false))
        })
    ]
};

これまで externals および module loaders を見てきましたが、機能するものは見つかりませんでした。モジュールローダーの除外により、モジュールが縮小されます。

いくつかのSO見てきた質問：

javascriptwebpackbundling-and-minification
23
Bronumski

Webpack externals は、特定の依存関係をバンドルしないようにする良いオプションです。

ただし、展開プロセスの一部として上書きできるように、config.jsを縮小から除外する必要があります。

外部として依存関係を追加すると、縮小から除外されるだけでなく、webpackによっても解決されません。

webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: {
    index: './src/index.js'
  },
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  externals: {
    './config': 'config'
  }
};

config.jsを要求するために使用されるパスを外部として追加します。私の簡単な例では、パスは./configに対応しています。構成オブジェクトを含むグローバル変数に関連付けます。私の場合、変数名としてconfigを使用しました（以下のconfig.jsを参照）。

index.js

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

const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;

console.log(endpointUrl);
console.log(authUrl);

Webpackがconfig.jsモジュールを解決できないようにするには、実行中に環境で使用可能にする必要があります。 1つの方法は、グローバルコンテキストでconfig変数として公開することです。

config.js

window.config = {
  env: {
    endpointUrl: 'http://1.2.3.4',
    authUrl: 'http://5.6.7.8'
  }
};

次に、特定の環境に特定のconfig.jsファイルをロードできます。

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Webpack</title>
</head>
<body>
  <script type="text/javascript" src="config.js"></script>
  <script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>
18
dreyescat

glify-loader がうまくいくと思う。箱から出したものよりも、縮小結果をより細かく制御できます。

5
Juho Vepsäläinen