フロントエンドおよびモバイル開発-webpack-webpack構成ファイル

webpack

目的：

• webpack構成ファイルの使い方を学ぶ
• パッケージングモードを指定し、2つのパッケージング方法の違いを理解します
• 入国書類と輸出書類を指定します
• devtoolをセットアップします

webpackが提供するゼロ構成機能は非常に弱く、カスタマイズできないため、機能をカスタマイズできる構成ファイルも提供します（推奨方法）。

構成ファイルを作成して使用し、パッケージファイルを設定します

目的：

• ゼロ構成を理解する

• 構成ファイルを知っている

• 梱包方法を設定できます

• 開発モードと本番モードの違いを理解する

ゼロ構成および構成ファイル

webpackが機能しているwebpack.config.js場合、デフォルトでルートディレクトリに名前が付けられたファイルが見つかります（見つからない場合は、いくつかのデフォルト設定を使用してゼロ構成機能をサポートします）。webpack.config.jsという名前のこのファイルはの構成ファイルです。 webpack。この構成ファイルでは、必要に応じて柔軟に構成して、パッケージ全体をより柔軟にすることができます。

webpack.config.js

この構成ファイルは、それ自体がnode.jsモジュール仕様に準拠するjsファイルであり、その機能は、webpackがプロジェクトをパッケージ化するときに使用する条件と制約を設定することです。

基本的な形式は次のとおりです。

module.exports = {
    
    
	配置项名1： 配置项值1，
	配置项名2： 配置项值2
}

各構成アイテムの名前と対応する値には特定の意味があり、自由に変更することはできません。

基本設定-パッケージモード

webpack.config.jsのmode項目は、パッケージ化方法を設定するために使用されますproduction。設定されていない場合、デフォルトで。になります。参考公式サイト

webpackは、モードアイテムに2つの属性値を提供します：

• 開発：開発モード。この時点で生成されたコード（dist / main.js）はまだ読み取り可能でサイズが大きいため、パッケージ化されたコードは開発に適しています。

• プロダクション：プロダクションモード。圧縮、難読化、暗号化など、Webpack内のいくつかの最適化手段が自動的に有効になります。つまり、コードが読み取れなくなり、元に戻せなくなります。

実際の操作を参照してください。

ルートディレクトリにwebpack.config.jsを作成し、次のように記述します。

/**
 1. 要放在项目的根目录下。
 2. 在npx webpack打包时，会自动去找这个文件，并运行其中的
    代码。如果找不到，则进入零配置模式 ---- 采用一些默认配置。
*/
console.log('打包文件....')
module.exports = {
    
    
  mode: "development"
}

次に、packagesコマンドを再度実行するとnpx webpack、console.log('打包文件....')それが実行されることがわかります。同時に、distディレクトリに新しいmain.jsが再度作成されます。

パッケージエントリを構成する

非常に重要な概念があります：エントリファイル（webpackが分析とパッケージ化を開始するファイル）

webpackの場合：

• デフォルトのエントリは次のとおりです。./src/index.js

• デフォルトのエクスポートは./dist/main.jsです。

構成ファイルを作成していない場合（または構成ファイルのエントリ設定を変更していない場合）、webpackはsrcの下にindex.jsを直接検索し、パッケージ化されたコードをdist /main.jsの下に配置します。

エントリーファイルとは

分析とパッケージ化を開始するファイルをwebpackに指示します。

エントリファイルをカスタマイズする方法

webpackのデフォルトのエントリファイルの場所は次のとおりです：src / index.js

実際に開発中の場合は、次のことを期待してください。

• このエントリファイルはindex.jsではなく、main.jsです。
• 全体的なjsファイルはsrcディレクトリではなく、src / jsの下に配置されます。

解決策：必要に応じて入口を再構成します。

手順1：ディレクトリ構造を調整して、上記の要件をシミュレートします。次のようにディレクトリ構造を調整します。

|-package.json
|-index.html
|-src/
|-src/js
|-------main.js
|-------tool.js

新しいディレクトリjsを作成し、index.jsをmain.jsに変更します

手順2：構成アイテムを変更する

設定項目のwebpack.config.js変更するentry項目を

module.exports = {
  mode: 'development', // 打包方式
  entry:'./src/js/main.js' // 入口文件
}

ステップ3：再梱包してテストします。

パッケージのエクスポートを構成する

輸出書類とは

ソースファイルをパッケージ化した後、どこに配置する必要がありますか？このファイルはエクスポートファイルであり、デフォルト値はdist /main.jsです。

パッケージのエクスポートを構成する方法

webpackのデフォルト値：デフォルト値dist / main.js

要件：エクスポートファイルをbuildディレクトリの下のbundle.jsに配置します

解決策：webpackage.jsに出力項目を設定します。

// 引入nodejs中的核心模块
const path = require('path') 
console.log(path.join(__dirname,'/build'))
module.exports = {
    
    
  mode: "production",
  entry: './src/js/main.js', // 入口文件
  output: {
    
    
     "path": path.join(__dirname,'/build'), // 决定出口文件在哪里
     "filename": "bundle.js" // 设置出口文件的名字。默认情况下，它叫main.js
  }
}

説明：

• 出力のファイル名は、パッケージ化されたファイルの名前を指定するために使用されます。
• 出力のパスは、パッケージ化されたパスを指定するために使用されます。注：絶対パスである必要があります。したがって、パスモジュールのjoinと__dirnameは、絶対パスを生成するためにここで参照されます。
• パス内のパスが存在しない場合は、自動的に作成されます。

devtoolを構成する

インポート

webpackパッケージによって生成されたターゲットファイルがターゲットファイルです。ターゲットファイルが間違っている場合は、デバッグして、どのファイルがエラーであるかを調べますか？

例

この問題を解決するには、devtoolの構成項目を学習する必要があります。

devtool

このオプションは、ソースマップを生成するかどうかと生成する方法を制御します。ソースマップは、パッケージ化前のソースコードとパッケージ化後のオブジェクトファイルの関係をマップするために使用されます。これは、デバッグに便利です（コードにエラーがある場合、エラーが含まれているソースコードを見つけることができます）。

module.exports ={
    
    
   devtool: 'source-map',
   mode: 'development'
}

devtoolには20を超える値から選択できます。各オプションには、たとえば次のような異なる意味があります。

• 「ソースマップ」：別のマップファイルにマッピング関係を生成します。

• 「Inline-source-map」：マッピング関係をパッケージファイルに保存します

提案：

• 本番フェーズで設定できます：cheap-module-source-map

• 開発段階で設定できます：cheap-module-eval-source-map

概要

• webpack構成ファイルのデフォルト名はwebpack.config.js

• webpackの学習は、主にwebpack.config.jsの使用法を学習することです。

• カスタマイズ：エントリ、出力、モード、devtool

欠点がある場合
は、継続するようにアドバイスしてください。更新を続けてください。
一緒に進歩しましょう！