指定したJSファイルをWebpackに個別にパッケージ化する方法
ここで、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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7529
15
1378
52
81
11
21
75
VUE3 入門チュートリアル: Webpack を使用したパッケージ化とビルド
Jun 15, 2023 pm 06:17 PM
Vue は、インタラクティブで効率的な Web アプリケーションを迅速に構築するのに役立つ優れた JavaScript フレームワークです。 Vue3 は、多くの新機能が導入された Vue の最新バージョンです。 Webpack は現在最も人気のある JavaScript モジュール パッケージャーおよびビルド ツールの 1 つで、プロジェクト内のさまざまなリソースの管理に役立ちます。この記事では、Webpack を使用して Vue3 アプリケーションをパッケージ化してビルドする方法を紹介します。 1.Webpackをインストールする
vite と webpack の違いは何ですか
Jan 11, 2023 pm 02:55 PM
相違点: 1. Webpack サーバーの起動速度は Vite より遅いですが、Vite は起動時にパッケージ化する必要がなく、モジュールの依存関係を解析してコンパイルする必要がないため、起動速度が非常に速くなります。 2. Vite ホット アップデートは webpack よりも高速です。Vite の HRM の観点から、特定のモジュールのコンテンツが変更された場合、ブラウザーにモジュールを再リクエストさせるだけです。 3. Vite は esbuild を使用して依存関係を事前構築しますが、webpack はノードに基づいています。 4. Vite のエコロジーは webpack ほど良くなく、ローダーとプラグインが十分に豊富ではありません。
モジュール開発に PHP と webpack を使用する方法
May 11, 2023 pm 03:52 PM
Web 開発テクノロジーの継続的な発展に伴い、フロントエンドとバックエンドの分離とモジュール開発が広く普及する傾向になりました。 PHP は一般的に使用されるバックエンド言語です。モジュラー開発を行う場合、モジュールの管理とパッケージ化にいくつかのツールを使用する必要があります。Webpack は非常に使いやすいモジュラー パッケージング ツールです。この記事では、モジュール開発に PHP と webpack を使用する方法を紹介します。 1. モジュラー開発とは何ですか? モジュラー開発とは、プログラムを、それぞれが独自の機能を持つ独立したモジュールに分解することを指します。
Webpack はどのように es6 モジュールを es5 モジュールに変換しますか?
Oct 18, 2022 pm 03:48 PM
設定方法: 1. import メソッドを使用して ES6 コードをパッケージ化された js コード ファイルに配置します; 2. npm ツールを使用して babel-loader ツールをインストールします。構文は「npm install -D babel-loader @babel/core」です。 @babel/preset-env"; 3. babel ツールの構成ファイル「.babelrc」を作成し、トランスコーディング ルールを設定します。 4. webpack.config.js ファイルでパッケージ化ルールを構成します。
Spring Boot と Webpack を使用してフロントエンド プロジェクトとプラグイン システムを構築する
Jun 22, 2023 am 09:13 AM
最新の Web アプリケーションの複雑さが増すにつれて、優れたフロントエンド エンジニアリングとプラグイン システムを構築することがますます重要になっています。 Spring Boot と Webpack の人気により、これらはフロントエンド プロジェクトとプラグイン システムを構築するための完璧な組み合わせになりました。 SpringBoot は、最小限の構成要件で Java アプリケーションを作成する Java フレームワークです。自動構成などの多くの便利な機能を提供するため、開発者は Web アプリケーションをより迅速かつ簡単に構築および展開できます。 W
ウェブパックとは何ですか?仕組みの詳しい説明は？
Oct 13, 2022 pm 07:36 PM
Webpack はモジュールのパッケージ化ツールです。さまざまな依存関係のモジュールを作成し、それらをすべて管理可能な出力ファイルにパッケージ化します。これは、単一ページ アプリケーション (今日の Web アプリケーションの事実上の標準) に特に役立ちます。
vwebpack パッケージに使用できるファイルは何ですか?
Dec 20, 2022 pm 07:44 PM
vue では、webpack は js、css、ピクチャ、json、その他のファイルをブラウザで使用できる適切な形式にパッケージ化できます。webpack では、js、css、ピクチャ、json、その他のファイル タイプをモジュールとして使用できます。 Webpack のさまざまなモジュール リソースは、パッケージ化して 1 つ以上のパッケージにマージでき、パッケージ化プロセス中に、画像の圧縮、scss から css への変換、ES6 構文から ES5 への変換などのリソースを処理できます。 HTMLで認識されるファイルタイプ。
vueにwebpackをインストールする方法
Jul 25, 2022 pm 03:27 PM
vue の Webpack は、ノード パッケージ マネージャー「npm」または npm イメージ「cnpm」を使用してインストールされます。 Webpack は、最新の JavaScript アプリケーション用の静的モジュール パッケージ ツールです。node.js に基づいて開発されています。使用する場合は、node.js コンポーネントのサポートが必要です。npm または cnpm を使用してインストールする必要があります。構文は、「npm install webpack -」です。 g」または「cnpm install webpack -g」。
