概念

基本的に、webpack は最新のJavaScriptアプリケーション用の静的モジュールパッケージツールです。同時に、webpackは優れたフロントエンド構築ツールである静的リソースパッケージャーでもあり、モジュールの依存関係に基づいて静的リソース分析を実行し、対応するブラウザーで直接識別できる静的リソースをすばやくパッケージ化して生成できます。

エントリポイント：内部依存関係グラフの作成を開始するために、webpackが使用するモジュールを指定します。

出力：作成するバンドルを出力する場所と、これらのファイルに名前を付ける方法をwebpackに指示します。

ファイルタイプの読み取り（ローダー）： JavaScriptファイルとJSONファイルのみを読み取ることができ、ローダーは import 任意のタイプのモジュールをインポートできます

プラグイン：ローダーは特定のタイプのモジュールを変換するために使用されますが、プラグインはより幅広いタスクを実行するために使用できます。含まれるもの：パッケージングの最適化、リソース管理、環境変数の注入。

環境モード（モード）：選択することで development、 production または none 設定するには、のいずれかの mode パラメータを、あなたはWebPACKの内蔵の最適化対応の環境で有効にすることができます。デフォルト値は production

ブラウザの互換性：事前にポリフィルをロードしてください。IE8以下のバージョンはサポートされていません。webpack import() と require.ensure() ニーズ Promise

環境： webpack5はNode.jsv10.13.0 +バージョンで実行されます。

処理する：

webpack環境をインストールします。

1）プロジェクトルートディレクトリコンソールは次のコマンドを実行します：npm init、package.jsonファイルを生成します。npmは新しいバージョンのノードに付属するパッケージ管理ツールです。package.jsonはリストと同等であり、記録するファイルです。依存ライブラリとプロジェクト情報。

2）グローバルインストールwebpackコマンド：npm i webpack webpack-cli -g、グローバルインストールは、コマンドがシステム環境の任意のプロジェクトフォルダーで使用できることを意味し、macコンピューターの最初の実行には管理者権限が必要です。sudonpmi webpack webpack-cli -gインターネットの速度が遅すぎる場合は、Taobaoミラーソースに切り替えることをお勧めします。

3）ローカルインストールwebpcakコマンド：sudo npm i webpack webpack-cli -D、ダウンロードしたモジュールはこのプロジェクトの下の./node_nodulesフォルダーに挿入されます。他のプロジェクトには影響せず、独立した役割を果たします。

コンセプトコア：

エントリーファイル

エントリファイルの説明。パッケージ分析やその他のパラメータにwepackが使用するエントリファイルを設定します。

module.exports = {
   entry: {   //入口
        suibian: './src/e.js',
        f: './src/f.js',
        myFile: './src/index.js'   //定义多个文件的路径
    },
}

出力。エクスポートファイル

ファイル命令をエクスポートし、webpackによってパッケージ化されたリソースバンドルの出力リソースのパスとパラメーターを構成します。

 output: {   //出口
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash:8].js',  //模块标识符的 hash
    },

プラグイン。プラグイン

プラグインを使用すると、webpackでより複雑なタスクを実行したり、パッケージの最適化やその他の関連機能を構成したりできます。対応するプラグインは、使用する前に個別に導入する必要があります。

1）处理html文件插件：
// 无template属性时，默认在输出目录创建一个空的html文件，并将打包后的资源引入其中。template指明文件时，则复制文件，并引入打包后的资源。
new HtmlWebpackPlugin({
  template: "./src/index.html",
  minify: {
    collapseWhitespace: true, // 清除空行缩进
    removeAttributeQuotes: true, // 清除注释
  },
}),
2）抽离CSS成单独文件插件：
// 处理CSS从js文件中抽离生成独立文件
new MiniCssExtractPlugin({
   filename: "static/css/app.css", // 文件输出目录
 }),
3）压缩CSS插件：
// Css压缩插件，需要在package.json中定义sideEffects属性防止它压缩去除掉一些css，less等文件。
new OptimizeCssAssetsWebpackPlugin(),

4）PWA离线访问技术插件：
// PWA离线缓存技术，优化使用体验，网络断开后刷新网页仍能够加载得到已经缓存的资源文件，依靠service Workers技术，插件执行后生成一个servicework配置文件，需要在入口文件中注册，兼容性判断。
new WorkboxWebpackPlugin.GenerateSW({
  clientsClaim: true, // 帮助servicework快速启动
  skipWaiting: true, // 删除旧版本使用最新的serviceworker技术
}),
5）忽略库并动态引入第三方库插件：
/**
 * dll动态引入单独库
 * 通过manifest.json文件中的映射关系，构建打包时进行忽略打包哪些库，再通过addAssetHtmlWebpackPlugin引入独立打包的库。
 */
new webpack.DllReferencePlugin({
  manifest: resolve(__dirname, "dll/manifest.json"),
}),
new addAssetHtmlWebpackPlugin({
  filepath: resolve(__dirname, "dll/jquery.js"),
}),

モード開発環境の構成

webpackの動作モードを構成します。開発モードと本番モードがあります。開発環境は構成が簡単なので、コードをローカルで実行できます。本番モードは複雑で、Webサイトの実行中およびオンライン時に処理する必要があります。

//モード： "開発"、
モード： "本番"、// webpackの作業環境を設定します

WebPack（最新のJavaScriptアプリケーション用の静的モジュールパッケージツール）

概念