webpack は乳母レベルの html css js のパッケージ化と処理を使用します

Webpackの概念は    、最新のフロントエンドの複雑な依存関係 (A プラグインには B プラグインが必要 B プラグインには D プラグインがある F プラグインには必要) を処理するために使用するフロントエンドパッケージングツールです
   。
プラグイン) 静的リソースを認識できるブラウザを生成します Vue 初期段階のスキャフォールディングは webpack で作成されます
   (
Vue Vite ビルドツールの推奨を開始します (高速))
React スキャフォールディング、
Angular およびその他の最新のフレームワークスキャフォールディングはすべて webpack に依存します

Webpack コアコンセプトの
   エントリ
エントリプロジェクト
       の開始点は、
       どこでパッケージ化を開始するか、出力を        パッケージに
   エクスポートするかを webpack に指示し、それを        ファイル名ファイル名        パスパス    モードモード        製品モード実稼働開発        モード開発    ローダーローダー        Webpack は、次の方法でのみ js ファイルをロードして処理できます。デフォルトローダーは webpack を所有させます他のファイルを処理する機能プラグインは、        webpack の実行ライフサイクル中に他のタスク(圧縮、クリーニング)    を実行します。

Webpack 設定は
デフォルトの webpack.config.js 設定ファイルにあります

devServer
   インストール: npm i webpack-dev-server -D
   機能: ローカルサーバーを開く open
   : true
       ブラウザを自動的に開くかどうか
   host: "localhost"
       ドメイン名
   port: 8080
       ポート番号
   hot: true
       update (ファイルを保存し、自動的に更新します) Web ページ)
   パッケージ .json
       スクリプト: {"serve":"webpackserve"}
       npm runserve プロジェクトを実行します

ローダーローダー
CSS
   処理
       インストール: npm i css-loader style-loader -D
       機能: css-loader .css ファイルを処理する style-loader スタイルタグ
       モジュールに CSS をロードします:{ ルール:[{test:/\.css$ /, use:["style-loader","css-loader"]}] }    ファイル(画像、ファイル)        のインストールを処理しています: npm i file-loader url-loader -D        機能: 画像とファイルをロードします        {test:/\ .( png|jpg|jpeg|gif|svg)$/,use:[{loader:"file-loader",options:{limit:5000,name:"images/[hash].[ext]"}}] }    プロセスsass        インストール: npm i sass sass-loader -D は        scss ファイルを処理します        {test:/\.scss$/,use:["style-loader","css-loader","sass-loader"]}

プラグ
インプラグイン
   HTML テンプレートプラグイン
       のインストール: npm i html-webpack-plugin -D
       機能: HTML テンプレートファイルを生成し、パッケージ化された js を        webpack.config.js の
           テンプレートファイルに自動的に挿入しますimport const HtmlWebpackPlugin = require("html-webpack -plugin ")        plugins:[ new HtmlWebpackPlugin({template:"./public/index.html"}) ]    dist ディレクトリをクリーンアップします        インストール: npm clean-webpack-plugin -D機能:        const {CleanWebpackPlugin}        をパッケージ化する前に dist ディレクトリを削除します= require("clean-webpack-plugin")        plugins:[new CleanWebpackPlugin()]    プラグインの        インストールを抽出します: npm i mini-css-extract-plugin -D        機能: CSS を別のファイルに抽出します

       インポート: const MiniCssExtractPlugin = require("mini-css-extract-plugin")
       ローダーを構成する
           {test:/\.css$/, use:[MiniCssExtractPlugin.loader,"css-loader"]} プラグ
       インをインスタンス化する
           new MiniCssExtractPlugin()

   CSS 圧縮インストールの最適化
       : npm i css-minimizer-webpack-plugin -D
       import: const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
   js 圧縮
       インストール: npm i terser-webpack-plugin -D
       import: const TerserPlugin = require("terser-webpack-plugin");
   圧縮
と最適化を達成する
       最適化: { minimum: true, //デフォルトは圧縮最小化です: [new CssMinimizerPlugin(),new TerserPlugin()],//Compressor    },    コード分割        最適化: { SplitChunks: { chunks: "all", // すべてのチャンクのコードの共通部分は別のファイルに分離されます}, }

特別なロゴ
   [hash] ハッシュアルゴリズムによって計算された文字列
   [hash:7] ハッシュ文字列の最初の 7 文字を取得
   [name] 元のファイル名
   [ext] ファイル拡張子名

ディレクトリエイリアス
の解決: { // エイリアス: @ は src ディレクトリのエイリアスを表します: { '@': path.resolve(__dirname, './src'), } },

開発ツール
devtool：「eval-cheap-source-map」
の機能、エラーとソースコードは1対1で対応

リンクとスクリプト
<script defer src=""></script>
js をロードする前にページのコンテンツがロードされるのを待ちます
<link href="" rel=prefetch>
CSS を事前にロードします

Webpack 内のマジックコメント magic comments
import(/* webpackChunkName: "jquery" , webpackPrefetch: true */ "jquery").then(({default:$})=>{ console.log($); }) /* webpackChunkName : "jquery" */現在の js ファイルに名前を付けます /* webpackPrefetch: true */ ネットワークは自由に js をプリロードできます

ハッシュ名
   01 はブラウザのキャッシュを制御できます。
ファイルが変更されると、ハッシュも変更され、ファイル名も変更され、ブラウザはキャッシュしません。ファイル名が変更されない場合、ブラウザは 2 番目の
キャッシュからコンテンツをリクエストします。 02 二次読み込み速度を
   提供します (キャッシュの効果的な制御)。
   コンテンツハッシュの
       コンテンツが変更されると、コンテンツハッシュの値が送信されます。
   チャンクハッシュの
       エントリが変更されると、現在のファイルのチャンクハッシュが変更されます        。プロジェクトのコンテンツが変更される限り、ハッシュは変更されます
   。
変更されます。

環境変数の
   設定: 製品環境でコードを圧縮するには、環境コマンドを使用します。コードは実稼働環境では圧縮されません。開発中に devtool プロジェクトを開きます。製品環境のベース URL http://dida100.com:8888 と実
   稼働
環境環境ベース URL http://localhost:8080
   1.
npm icross-env -D
   2.
package.json パラメータを渡す
       "build": "cross-env NODE_ENV=production webpack",
"serve": "cross-env NODE_ENV=development webpackserve",
   3. webpack.config.js の使用
       mode:process.env.NODE_ENV,
       devtool:process.env.NODE_ENV==="production"?false:'eval-cheap-source-map',
   4. 使用
       varbaseURL = "";
if(process.env.NODE_ENV=="production"){    baseURL = "http://dida100.com"; }else{    baseURL = "http://localhost"

console.log
("現在の環境:", process.env.NODE_ENV, BaseURL);

vue のスキャフォールディングを使用せずにプロジェクトを構築するにはどうすればよいですか
   ?
   npm i vueをインストールします
       -S
       npm i
           vue-loader
process.vue
           vue-template-compiler
コンパイル vue ディレクトリ
           vue-hot-reload-api
ホットアップデート
           vue-style-loader
処理 vue スタイル
   設定
       01 import
const {VueLoaderPlugin} = require(" vue-loader")
       02 設定
{test:/\.vue$/,use:["vue-loader"]}
       03 プラグイン
プラグイン: [new VueLoaderPlugin()]
   js
       テンプレートファイル public/main.html
<div id =" app"></div>
       main.js
import { createApp } from 'vue';
// App.vue をインポート
「./App.vue」からアプリをインポートします。
コンソール.ログ(アプリ);

// アプリを作成してマウントします
createApp(App).mount("#app")
       App.vue
           <template >
   <div>
       <h1>Hello Vue3</h1>
   </div>
</template >

無料のテーマ

webpack は乳母レベルの html css js のパッケージ化と処理を使用します

おすすめ