Webpack サーバー側コードのパッケージ化

この記事では主にWebpackのサーバーサイドコードパッケージ化のサンプルコードを紹介していますが、編集者が非常に良いと思ったので、参考として共有させていただきます。エディターをフォローして見てみましょう

環境変数

以前は、プロジェクト内で process.env.NODE_ENV をよく使用していましたが、この変数は Webpack のパッケージ化に影響を与え、運用中に最適化されます。

そこで、他の環境変数を使用して区別します:

new webpack.DefinePlugin({
 'process.env.NODE_ENV': '"production"',
 'process.env.API_ENV': `"${process.env.API_ENV || 'development'}"`
})

このように、NODE_ENV は常に運用環境用です。

そして実際の開発/運用環境では、 process.env.API_ENV 変数を使用して (このプロジェクトは koa インターフェイス サービス プロジェクトであるため、満足している限り、このように名前を付けたり、任意の名前に変更したりできます)。

注: 以前はノードを使用していました。 js バックエンド プロジェクトでは、動的構成の読み込みは通常次のように記述されます:

const ENV = process.env.NODE_ENV || 'development';
// eslint-disable-next-line import/no-dynamic-require
const options = require(`./_${ENV}`);

module.exports = options;

可読性を向上させ、ENV の再利用の可能性を高めるために、変数を個別に定義します。

これを webpack パッケージ化されたプロジェクトで直接実行する場合, たとえば、現在複数の構成があるとします。現在の環境は開発環境であり、すべての設定ファイルはパッケージ化されます (ただし、実行されることはありません)。この場合、機密情報が漏洩する危険性があります:

config /index。 .js

• // eslint-disable-next-line import/no-dynamic-require
  const options = require(`./_${process.env.API_ENV || 'development'}`);
  
  module.exports = options;

  モジュラーパッケージ化

• たとえば、プロジェクト内に負荷分散が必要なモジュールが多数ある場合や、顧客がカスタマイズしたモジュラー製品の場合、これを防ぐためにモジュールにパッケージ化する必要があります。他のモジュール (決して実行されない) が webpack バンドルにパッケージ化されないようにするため、サーバーにロードすると、次のようになります:

• // config/_development.js
  exports.enabledModules = ['user', 'demo']; 
  // 可能 src 目录下 还有其他模块目录, 如 'manage' 等

  次に、ContextReplacementPlugin が必要になります。プラグインはそれをサポートします。は次のとおりです:

• new webpack.ContextReplacementPlugin(/src/, new RegExp(`^./(${enabledModules.join('|')})/.*$`))

高度な使用法

たとえば、 src ディレクトリ内の各モジュールのディレクトリに加えて、 lib およびフックなどのいくつかの共通のメソッド クラスとフック ディレクトリもあり、これらの 2 つのディレクトリは他のサブモジュールによって参照される場合があります。プラグイン正規表現内: コードは次のとおりです:


new webpack.ContextReplacementPlugin(/src/, new RegExp(`^./(lib|hook|${enabledModules.join('|')}) /.* $`))




コードを圧縮し、ソースマップのサポートを追加します


Uglifyjs または Uglify-es は、実際にはサーバー側のコード パッケージ化に適しておらず、パッケージングの失敗を引き起こす可能性があります。babel-minify- を使用してください。 webpack- plugin 置き換えるプラグイン。
source-map-support プラグインと連携して、ソース コードの問題箇所をサポートします。


サンプル プロジェクトのソース コード: https://github.com/AirDwing/webpack-server-バンドル

上記が記事の全文です。内容は、皆様の学習に役立つことを願っております。また、皆様もスクリプト ハウスをサポートしていただければ幸いです。

以上がWebpack サーバー側コードのパッケージ化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。