指定したJSファイルをWebpackに個別にパッケージ化する方法-jsチュートリアル-php.cn

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

亚连

リリース： 2018-06-05 15:47:14

オリジナル

2912 人が閲覧しました

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

バックグラウンド

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

CommonsChunkPlugin

module.exports = {
 entry: {
 app: APP_FILE // 入口文件
 },
 output: {
 publicPath: &#39;./dist/&#39;, //输出目录，index.html寻找资源的地址
 path: BUILD_PATH, // 打包目录
 filename: &#39;[name].[chunkhash].js&#39;, // 输出文件名
 chunkFilename: &#39;[name].[chunkhash].js&#39; // 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 サイトの他の関連記事を参照してください。