ホームページ > 記事 > ウェブフロントエンド > 指定したJSファイルをWebpackに個別にパッケージ化する方法
指定したJSファイルをWebpackに個別にパッケージ化する方法
- 亚连オリジナル
- 2018-06-05 15:47:142877ブラウズ
ここで、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: 'ip', minChunks: Infinity}),をプラグインに追加して、ip.xxx.js が最初にロードされるようにしてエラーを回避します。
短所: このパッケージ化には明らかな欠点があります。それは、パッケージ化されたファイルが圧縮されているため、ファイルを 2 回変更するのが不便であるということです。 (圧縮に対する解決策は見つかりませんでした)
CopyWebpackPlugin
最終的な解決策は、ip.js ファイルをプロジェクトのモジュール性から分離し、index.html で個別に参照することです。 （これは私が最初に考えた解決策でしたが、私が望んでいた解決策ではありませんでしたが、残念ながら私の知識が限られていたため、前の問題は解決できませんでした）。
解決プロセス:
最初にWebpackにCopyWebpackPluginを導入します。設定コード:
new CopyWebpackPlugin([
{from: './src/config/ip.js', to: 'ip.js'},
])index.htmlにスクリプトタグを個別に導入し、ランダムなサフィックスを設定することに注意してください:
<script>
document.write("<s"+"cript type='text/javascript' src='./dist/ip.js?"+Math.random().toString(36).substr(2)+"'></scr"+"ipt>");
</script>ip.jsを防ぐキャッシュが問題を引き起こしているからです。
上記は、jsを個別に指定したwebpackパッケージ化の問題を解決します。
上記は私があなたのためにまとめたものです。
関連記事:
FastClick ソースコードを詳しく説明する (詳細なチュートリアル)
vue と element-ui を使用してテーブル コンテンツのページングを実装する方法
vue を使用してタイムスタンプをカスタム時間形式に変換する方法
以上が指定したJSファイルをWebpackに個別にパッケージ化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。