Webpackパッケージ関連

browserify:CommonJSをコンパイルしてブラウザ側で使用できます
一、mode
開発環境mode:'development'生産環境mode:'production'二、entry
entry:入口始点

string-->'./src/index.js'単一入口パッケージはchunkを形成する.bundleファイルを出力します.この場合chunkの名前のデフォルトはmain

です.

array-->['./src/index.js', './src/add.js']マルチエントリすべてのエントリファイルは最終的に1つのchunkしか形成されず、出力は1つのbundleファイルしかありません.-->HMR機能でのみhtml熱更新を有効にする~

objectマルチエントリいくつかのエントリファイルがいくつかのchunkを形成し、いくつかのbundleファイルを出力するこのときchunkの名前はkey-->特殊な使い方

        {
          //               chunk,         bundle  。
          index: ['./src/index.js', './src/count.js'], 
          //     chunk，    bundle  。
          add: './src/add.js'
        }

三、output

output: {
    //     （    +  ）
    filename: 'js/[name].js',
    //       （             ）
    path: resolve(__dirname, 'build'),
    //              --> 'imgs/a.jpg' --> '/imgs/a.jpg'
    publicPath: '/',
    chunkFilename: 'js/[name]_chunk.js', //    chunk   
    // library: '[name]', //            
    // libraryTarget: 'window' //           browser
    // libraryTarget: 'global' //           node
    // libraryTarget: 'commonjs'
  },

filenameとキャッシュ

hash,webpackはパッケージごとに新しいhash値

を生成する.

chunkhash、chunkによって生成されたhash値に基づいて、パッケージが同じchunkに由来する場合、hash値は同じ

である.

contenthashは、ファイルの内容に基づいてhash値を生成し、ファイルによってhash値が異なるに違いない

四、loader
Webpackはjsとjsonファイルしか処理できません.他のタイプのファイルはloaderでコンパイルしてwebpackで識別できるファイルに変換する必要があります.
1.スタイルファイル、css、less、sassなどの処理
style-loader:styleラベルを作成し、jsのスタイルリソースを挿入して行い、headに追加して有効にしますcss-loader:cssファイルをcommonjsモジュールにコンパイルしてjsをロードします.内容はスタイル文字列less-loader:lessファイルをcssファイルsass-loaderにコンパイルします:sassファイルをcssファイルにコンパイルします
本番環境処理スタイルファイル
(1)cssを抽出する単独ファイルMiniCssExtractPlugin:MiniCssExtractPluginを使用する.loaderはstyle-loaderの代わりに、style-loaderにはHMR機能が内蔵されているため、開発環境ではstyle-loaderも使用されている

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "../",
            },
          },
          "css-loader",
        ],
      },
    ],
  },
};

(2)css互換性処理postcss,postcss-loader,postcssはwebpackでもpostcssでもよい.config.jsで構成します.postcss互換の共通プラグインautoprefixer、postcss-preset-envbrowserslistブラウザリスト構成はpackage.jsonにbrowserslistを配置するもよい.browserslistorc構成
(3)圧縮csswebpack 5以前のバージョンはoptimize-css-assets-webpack-pluginwebpack 5以降のバージョンはcss-minimizer-webpack-plugin
2.画像リソースの処理
url-loader:file-loaderに基づいてbase 64処理html-loaderを追加する:htmlファイル中のimgピクチャを処理する(imgの導入を担当し、url-loaderによって処理できる)
3.フォントリソースおよびその他のリソースの処理
file-loader
4.処理js
(1)js構文チェック
Eslint-loader(古いのでeslint-webpack-pluginを使用してください)、eslint(詳細はhttps://segmentfault.com/a/11...を参照)
(2)js互換
babel-loader(キャッシュをサポート)@babel/cli@babel/core(polyfillをオンデマンドでロード)詳細はbabelトランスコーダ@babel/preset-env@babel/polyfill(古い、全体のロード容量が大きすぎる)
(3)js圧縮
modeをproductionに設定するだけでjsコードが自動的に圧縮されます
五、resolve

resolve: {
    //           :                
    alias: {
      $css: resolve(__dirname, 'src/css')
    },
    //             
    extensions: ['.js', '.json', '.jsx', '.css'],
    //    webpack            
    modules: [resolve(__dirname, '../../node_modules'), 'node_modules']
  }

六、devServer
開発環境で使用し、自動的にコンパイルし、自動的にブラウザを開き、自動的にブラウザをリフレッシュします.設定hot:true HMR(モジュールの熱交換)をオンにすると、1つのモジュールが変化し、すべてのモジュールをパッケージ化するのではなく、このモジュールを再パッケージし、構築速度を向上させるだけです.

スタイルファイルstyle-loaderを使用するとHMR機能

を使用できます.

jsファイルはjsでコードを修正する必要があり、非エントリjsファイルの他のファイル

しか処理できない.

if (module.hot) {
   module.hot.accept('./print.js', function() {
     console.log('Accepting the updated printMe module!');
     printMe();
   })
 }

七、devtool
ソースコードと構築後のコードのマッピングを提供します.2つの種類に分けられます.

にインラインし、マッピング関係をjsファイルにネストする

外部では、マッピングファイルが個別に生成され、本番環境はインライン化されず、ソースコード

を非表示にする必要がある.
八、externals
一部のimportのパッケージをbundleにパッケージ化するのではなく、実行時に外部から拡張依存性(external dependencies)を取得することを防止します.例えば、CDNからjQueryを導入し、パッケージ化するのではなく
九、生産環境の最適化
1.htmlの処理と圧縮
html-webpack-plugin
2.キャッシュ

babel-loaderを使用してbabelキャッシュを行い、cacheDirectory: true、2回目のパッケージ構築速度をより速くする

.

ファイルリソースキャッシュoutputのfilename contenthash

を使用
3.treeShaking:不要なコードを取り除く
前提:1.ES 6モジュール化2を使用する必要がある.パッケージ環境でproductionを開きます.jsonでの構成

  "sideEffects": false           （     tree shaking）
      ：    css / @babel/polyfill （   ）    
  "sideEffects": ["*.css", "*.less"]

4.codesplit
(1)splitChunksの使用

node_modulesのコードは、chunkの最終出力

を個別にパッケージ化します.

マルチエントリchunkで、共通のファイルがあるかどうかを自動的に分析します.ある場合はchunk

にパッケージされます

module.exports = {
  entry: {
    index: './src/js/index.js',
    test: './src/js/test.js'
  },
  output: {
    filename: 'js/[name].[contenthash:10].js',
    path: resolve(__dirname, 'build')
  },
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  },
  mode: 'production'
};

(2)importダイナミックインポート構文を使用して、あるファイルを1つのchunkに個別にパッケージ化できる

import(/* webpackChunkName: 'test' */'./test')
  .then(({ mul, count }) => {
    // eslint-disable-next-line
    console.log(mul(2, 5));
  })
  .catch(() => {
    // eslint-disable-next-line
    console.log('      ~');
  });

5.怠惰負荷
importダイナミックインポート構文を使用して怠惰なロードを行う
6.dll
dllテクノロジーを使用して、一部のライブラリ(サードパーティライブラリ:jquery、react、vue...)個別のパッケージを実行する場合は、デフォルトでwebpackを検索します.config.jsプロファイルはwebpack.dll.jsファイルでは、個別にパッケージ化する必要があるライブラリを構成し、DllPluginとDllReferencePluginを組み合わせて使用します.