ホームページ  >  記事  >  ウェブフロントエンド  >  指定したJSファイルをWebpackに個別にパッケージ化する方法

指定したJSファイルをWebpackに個別にパッケージ化する方法

亚连
亚连オリジナル
2018-06-05 15:47:142931ブラウズ

ここで、webpack を使用して指定された JS ファイルを個別にパッケージ化する方法を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

バックグラウンド

最近リクエストを受け取りました。印刷されたフロントエンドパッケージによってアクセスされるバックエンドIPが不明なため、変更を容易にするためにプロジェクト内のIP構成ファイルを個別に取り出す必要があります。運用および保守展開中の IP。したがって、webpack を使用して、指定したファイルを個別にパッケージ化する必要があります。

CommonsChunkPlugin

module.exports = {
 entry: {
 app: APP_FILE // 入口文件
 },
 output: {
 publicPath: './dist/', //输出目录,index.html寻找资源的地址
 path: BUILD_PATH, // 打包目录
 filename: '[name].[chunkhash].js', // 输出文件名
 chunkFilename: '[name].[chunkhash].js' // commonChunk 输出文件
 }
}

余談

{

まずpublicPathについて話しましょう ここで注意点があります、それはパスが ./dist 相対パスとして書かれていることです。 /dist/ のような絶対パスを記述する場合、nginx がフロントエンド パッケージをルート ディレクトリに配置しない場合、index.html がリソースにアクセスできないという欠点があります。したがって、相対パスを記述することをお勧めしますが、相対パスを使用すると、プロジェクト自体のルーティング アクセスがハッシュを使用せずに HTML5 モードになっている場合 (先頭に # 記号が付いている)、潜在的な問題が発生します。ルーティング)、その後もプロジェクトへのアクセスは失敗します。 Angular と React ではこのような問題が発生します。私は Vue を使用したことがないので、同様のはずです。現時点での解決策は、index.html の先頭にベース タグを追加することです。つまり、

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 <base href="/" rel="external nofollow" >
</head>

}

webpack 自体はモジュール性に基づいているため、ほとんどの場合、取得するために必要なエントリ ファイルは 1 つだけです。できました。この要件を実現するには、このエントリに加えてエントリ ファイルをアプリに追加する必要があります。つまり:

 entry: {
 app: APP_FILE // 入口文件
 ip: IP_FILE
 },

この方法で webpack を設定した後、dist ファイルは app.xxx.js と ip.xxx.js を正常に出力しますが、パッケージ化されたプロジェクトは引き続きエラーを報告します。 解決策は、IP エントリ ファイルを保持することです。ただし、それを commonChunk として扱います。つまり、

new webpack.optimize.CommonsChunkPlugin({name: &#39;ip&#39;, minChunks: Infinity}),

をプラグインに追加して、ip.xxx.js が最初にロードされるようにしてエラーを回避します。

短所: このパッケージ化には明らかな欠点があります。それは、パッケージ化されたファイルが圧縮されているため、ファイルを 2 回変更するのが不便であるということです。 (圧縮に対する解決策は見つかりませんでした)

CopyWebpackPlugin

最終的な解決策は、ip.js ファイルをプロジェクトのモジュール性から分離し、index.html で個別に参照することです。 (これは私が最初に考えた解決策でしたが、私が望んでいた解決策ではありませんでしたが、残念ながら私の知識が限られていたため、前の問題は解決できませんでした)。

解決プロセス:

最初にWebpackにCopyWebpackPluginを導入します。設定コード:

new CopyWebpackPlugin([
  {from: &#39;./src/config/ip.js&#39;, to: &#39;ip.js&#39;},
 ])

index.htmlにスクリプトタグを個別に導入し、ランダムなサフィックスを設定することに注意してください:

<script>
 document.write("<s"+"cript type=&#39;text/javascript&#39; src=&#39;./dist/ip.js?"+Math.random().toString(36).substr(2)+"&#39;></scr"+"ipt>");
</script>

ip.jsを防ぐキャッシュが問題を引き起こしているからです。

上記は、jsを個別に指定したwebpackパッケージ化の問題を解決します。

上記は私があなたのためにまとめたものです。

関連記事:

FastClick ソースコードを詳しく説明する (詳細なチュートリアル)

vue と element-ui を使用してテーブル コンテンツのページングを実装する方法

vue を使用してタイムスタンプをカスタム時間形式に変換する方法

以上が指定したJSファイルをWebpackに個別にパッケージ化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。