Webpackの基本的な使い方

まず、Webpackとは何ですか?

WebPack はモジュール パッカーとみなすことができます。WebPack が行うことは、フロント エンドの複雑な依存関係 (A にはプラグイン B が必要、プラグイン B にはプラグイン C が必要、プラグイン C にはプラグインが必要) を処理することです。 D) プロジェクトの構造を分析し、ブラウザーが直接実行できない JavaScript モジュールやその他の拡張言語 (Scss、TypeScript など) を見つけ、ブラウザーが使用できる適切な形式にパッケージ化します。
Webpack のコンセプトは、すべてがモジュール化されているということです。大量の CSS ファイルと JS ファイルを一般的なエントリ ファイルに配置し、require を通じてインポートすると、Webpack がすべてのモジュールの前後の依存関係、パッケージ化、圧縮を含む残りの部分を処理します。 , 1つのjsファイルにまとめると、共通コードは1つのjsファイルに抽出され、一部の自己指定jsは別途パッケージ化され、モジュールはcss/js/imsge/fontなどになります。

次に、webpack はどのようなジョブを処理できるでしょうか?

1. webpack はテンプレートに従って HTML を生成し、上記の css/js 参照パスを自動的に処理します。
2. webpackは内部の画像のパス、CSS内の背景画像のパス、フォント参照を自動処理できます
3. webpack はローカル サーバーを開いてコードを書き換え、ページのコンテンツを自動的に更新できます。

3、インストールする

1. まずプロジェクト ディレクトリに移動してプロジェクトを初期化します

npm init -y //项目初始化

3. 私たちのプロジェクトでは、まず webpack パッケージ化ツールをインストールし、次のコマンドを実行する必要があります。

npm i webpack webpack-cli -D //开发环境下

3. パッケージ化ツールをインストールしたら、依存関係を忘れずにインストールしてください。

npm i //安装node_moudles

4. プロジェクト ディレクトリに移動します。現時点では、node_modules が 1 つだけあり、この時点で、dist-packaging ディレクトリ、public-public template、src-source ファイル ディレクトリの 3 つのフォルダを作成する必要があります (作成する必要はありません)この 3 つの名前で呼ばれます、慣れてください)

4番目に、Webpackを設定します

src フォルダーで、新しいファイル webpack.config.js を作成します。このファイルは webpack の構成ファイルです。webpack はビルドおよびパッケージ化する前にこの構成ファイルを読み取り、設定した構成に基づいてパッケージ化します。

(1) コアコンセプト

• エントリ エントリ: Webpack がパッケージ化を開始する場所を指定します。エントリ ポイントを入力すると、Webpack はどのモジュールとライブラリがエントリ ポイントの依存関係であるかを調べます。ここでのデフォルトのエントリ ファイルは、src の下にあるindex.js ファイルです。

ただし、Webpack 設定でエントリ属性を設定して、1 つ以上の異なるエントリ ポイントを指定することもできます。例えば：

• webpack.config.js
• Output
  Output 属性は、Webpack に、作成するバンドルを出力する場所と、それらのファイルに名前を付ける方法を指示します。メイン出力ファイルのデフォルトは ./dist/main.js で、その他の生成されたファイルはデフォルトで ./dist フォルダーに配置されます。構成で出力フィールドを指定することで、これらのプロセスを構成できます。
• webpack.config.js

module.exports = {
    
    
	entry:'./src/index.js', //入口
	output:{
    
     //出口
		filename:"main.js",//文件名
		path:__dirname+'/dist' //文件夹  __dirname 当前目录
	},
	mode:"production",//模式：开发模式 production产品模式
	plugins:[
		// 实例化插件，指定template模板的位置
		new HtmlWebpackPlugin({
    
    
			template:'./public/index.html'
		})
	],
	}

モードモード

mode パラメーターを開発、実稼働、またはなしのいずれかに設定すると、webpack がその環境に組み込んだ最適化を有効にすることができます。デフォルト値は実稼働です。

モード ノードには次の 2 つのオプションの値があります。

発達：

• 開発環境、
• パッケージ化によって生成されたファイルに対してコード圧縮とパフォーマンスの最適化は実行されず、パッケージ化速度は高速です。
• 開発段階での使用に適しています

製造

• 本番環境
• コード圧縮とパフォーマンスの最適化は、パッケージ化によって生成されたファイルに対して実行されます。
• パッケージ化の速度は非常に遅いため、プロジェクトのリリース段階での使用にのみ適しています。

1. webpack.config.js ファイルで設定します。

2. Pack.json ファイルの script ノードの下に新しいサーバーを追加します。

3. ターミナルで npm runserve コマンドを実行し、webpack を開始してプロジェクトをパッケージ化してビルドします。

（3）ローダー

実際の開発プロセスでは、webpack はデフォルトで .js 接尾辞で終わるモジュールのみをパッケージ化して処理できます。.js サフィックスで終わらないその他のモジュールは、デフォルトでは webpack で処理できず、通常どおりパッケージ化するにはローダーを呼び出す必要があります。そうしないと、エラーが報告されます。

• ローダー ローダーの役割: Webpack が特定のファイル モジュールをパッケージ化して処理するのを支援します。

3.1 CSSプロセッサ

css-loader は css の関係を分析します - css (インポート)
関数をマージします: css-loader は .css ファイルを処理します style-loader は css を style タグに読み込みます

• インストール
  次のコマンドを実行して、このプラグインをプロジェクトにインストールします

npm i css-loader strle-loader -D

• 設定
  webpack.config.js に次のコードを記述します。

	module:{
    
    
		rules:[
			// 当文件名test通过，使用如下插件
			{
    
    test:/\.css$/,use:["style-loader","css-loader"]},
			
			{
    
    test:/\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
			use:[{
    
    
				loader:"url-loader",
				options:{
    
    limit:5000,name:'images/[hash].[ext]'}
			}],
			}
		]
	},

3.1 画像とファイルの処理

file-loader は、プロジェクト (CSS に限定されない) にインポートされた URL を解析して、正しいファイルを指すことができます。

url-loader は、base64 エンコード形式で小さな画像を生成します (url-loader は file-loader をカプセル化します)。

image-webpack-loader プラグインは、大きな画像を圧縮してパッケージ サイズを削減できます。

html-loader HTML コード内の img タグを処理するローダー。

• インストール: 次のコマンドを実行して、このプラグインをプロジェクトにインストールします。

npm i file-loader url-loader

• 設定
  webpack.config.js に次のコードを記述します。

module.exports = {
    
    
	entry:'./src/index.js', //入口
	output:{
    
     //出口
		filename:"main.js",//文件名
		path:__dirname+'/dist' //文件夹  __dirname 当前目录
	},
	mode:"production",//模式：开发模式 production产品模式
	plugins:[
		// 实例化插件，指定template模板的位置
		new HtmlWebpackPlugin({
    
    
			template:'./public/index.html'
		})
	],
	module:{
    
    
		rules:[
			// 当文件名test通过，使用如下插件
			{
    
    test:/\.css$/,use:["style-loader","css-loader"]},
			
			{
    
    test:/\.(png|jpg|jpeg|webp|ico|gif|bmp)$/,
			use:[{
    
    
				loader:"url-loader",
				options:{
    
    limit:5000,name:'images/[hash].[ext]'}
			}],
			}
		]
	},
	// 需要提前安装 npm i  webpack-dev-server -D
	devServer:{
    
    
		port:8080,
		hot:true, //更新
		host:"localhost",//域名
		open:true,//默认自动打开浏览器
		proxy:{
    
    } //vue.config.js 代理一致
	}
}

ケース

• 
  Index.js ファイルでの画像処理
• 次に、プロジェクト npm run build を実行します。
  
  注: 再度設定する必要はありません。
• CSSをインポートする
  

6、webpack-dev-server

webpack-dev-server を使用すると、webpack がプロジェクトのソース コードの変更をリッスンして、自動的にパッケージ化してビルドできるようになります。

• インストール
  次のコマンドを実行して、このプラグインをプロジェクトにインストールします

npm i webpack -dev-server -D

• webpack.config.js の構成 webpack.config.js
  構成ファイルでは、devServer ノードを介してさらに webpack-dev-server プラグインを構成できます。サンプル コードは次のとおりです。

module.exports={
    
    
	devServer:{
    
    
		port:8080,
		hot:true, //更新
		host:"localhost",//域名
		open:true,//默认自动打开浏览器
		proxy:{
    
    } //vue.config.js 代理一致
	}

• package.json を変更する
  package.json -> scripts のserveコマンドを次のように変更します。
  npm run build コマンドを実行し、プロジェクトを再パッケージ化して、npm runserveでプロジェクトを実行します。自動的にブラウザにジャンプして自動パッケージ化が表示されます。効果