Webpack基礎知識まとめ

本稿では、複数の面から自分の知っているWebpack知識を振り返ってみます.よくある配置項目、先端に構築された方法とプロジェクトの実際の最適化方法を含みます.
一、Webpackについて
1.概念
本質的に、webpackは現代JavaScriptアプリケーションの静的モジュールパッケージングです.webpackがアプリケーションを処理するとき、アプリケーションに必要なモジュールを含み、これらのモジュールを一つ以上のbundleにパッケージ化する依存関係図を再帰的に構築します.一般的な構造は以下の通りです.

 module.exports = {

    entry:'./main.js',

    output:{
        path:__dirname,
        filename:'bundle.js'
    },

    module:{
        rules:[
            {
                test:/\.(png|jpg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            }
        ]
    }
}

2.入り口(entry)
入口の始点(entrypoint)は、webpackがどのモジュールを使用するべきかを示し、その内部依存図の構築の開始とする.入り口の起点に入ると、webpackはどのモジュールとライブラリが入り口の起点(直接と間接)依存であるかを見つけることができます.エンバリー属性は、webpack構成において設定されることにより、入口の始点(または複数のエントリの始点)を指定することができます.標準値は./srcです.

 {
        entry: {
          app: './src/app.js',
          search: './src/search.js'
        },
        output: {
          filename: '[name].js',
          path: __dirname + '/dist'
        }
    }

3.輸出(output)
output属性は、webpackが作成したbundlesをどこで出力するか、およびこれらのファイルの名前はどうなりますか?基本的に、アプリケーション全体の構造は、指定された出力パスのフォルダにコンパイルされます.これらの処理は、設定においてoutputフィールドを指定することによって構成できます.上記の例では、Output.filenameとoutput.path属性を通じて、webpack bundleの名前と、私たちはbundleの生成(emit)をどこにしたいですか?複数の入り口の起点がある場合、以下のような対象の形で入り口と出口を書くことができます.
4.モード(mode)
modeの設定オプションを提供して、webpackに対応モードの内蔵最適化を知らせる.

mode :　'development' | 'production'

5.loader
loaderはモジュールのソースコードを変換するために使用されます.loaderは、importまたは「読み込む」モジュールでファイルを前処理することができます.したがって、他の構築ツールの「タスク」と同様に、処理先端構築ステップの強力な方法が提供される.loaderは、ファイルを異なる言語(Type Scriptなど)からJavaScriptに変換したり、インライン画像をdata URLに変換したりすることができる.loaderはJavaScriptモジュールの中で直接にimport CSSファイルを許可します.
5.1.loaderを使う
Loadersは単独でインストールする必要があります.webpack.co nfig.jsのmodulesキーワードの下で配置する必要があります.Loadersの構成は以下のいくつかの態様を含みます.

test:処理ファイルの拡張子と一致する正規表現(必須)

loader:loaderの名前(必須)

include/exclude:処理しなければならないファイル(フォルダ)を手動で追加したり、処理しないファイル(フォルダ)をブロックしたりします.

query:loadersのための追加の設定オプション(オプション)

を提供します.

    module.exports = {

    entry:'./main.jsx',

    output:{
        path:__dirname,
        filename:'bundle.js'
    },

    module:{

        rules:[

            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            },

            {
                test:/\.jsx?$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['es2015','react']
                    }
                }
            }

        ]

    }

}

5.2.loader特性

loaderは、チェーン伝達をサポートする.資源に対してラインを使うことができます.チェーンのセットのloaderは、写真の逆の順序で実行されます.loaderチェーンの最初のloaderは、次のloaderに値を返します.最後のloaderでwebpackが予想していたJavaScriptを返します.

loaderは同期であってもよく、非同期であってもよい.

loaderはNode.jsにおいて実行され、任意の可能な動作を実行することができる.

loaderはクエリパラメータを受信する.loaderに対して構成を伝達するために使用されます.

loaderは、optionsオブジェクトを用いて構成することもできる.

は、package.jsonで一般的なmain属性を使用するだけでなく、一般的なnpmモジュールをloaderとして導出することができ、package.jsonでloaderフィールドを定義することができる.

プラグインは、loaderにより多くの特性をもたらすことができる.

loaderは、追加の任意のファイルを生成することができる.

include/exclude:処理しなければならないファイル(フォルダ)を手動で追加したり、処理しないファイル(フォルダ)をブロックしたりする(オプション).

6.プラグイン(plugis)

プラグインは、webpackの支柱機能である.webpack自体も、webpack構成で使用する同じプラグインシステムに構築されています.プラグインの目的は、loaderでは実現できない他のことを解決することです.

webpackプラグインは、appy属性を持つJavaScriptオブジェクトである.apply属性はwebpack complerに呼び出され、comppilerオブジェクトはコンパイルライフサイクル全体でアクセスできます.

プラグインはパラメータ／オプションを運ぶことができるので、webpack構成において、plugins属性にnewインスタンスを入力しなければなりません.

const HtmlWebpackPlugin = require('html-webpack-plugin'); //   npm   
    const webpack = require('webpack'); //       
    --
    --
    --
    plugins: [
        new webpack.optimize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({template: './src/index.html'})
    ]

二、先端構築
現在の開発構築プロジェクトのプロセスは、VueであれReactであれ、彼らの足場Vue-cliとCreate React Appのツールは自動的にWebpackをプロジェクトに追加します.以下では、自分で手動で構築した基本的な構成とプロセスを紹介します.
1.据え付け

    npm install webpack webpack-cli -g 
       
    yarn global add webpack webpack-cli

2.設定
webpackのフォルダを新規作成し、その下にtry-webpackを新規作成し(initを防止するときは項目名とインストールパッケージ名が同じ)、webpackを初期化して設定します.

    npm init -y  //-y        
    yarn add webpack webpack-cli -D  //-D webpack   devDependencies   

三、展開webpack
package.jsonにscriptsを配置します.

  "scripts": {
    "build": "webpack --mode production" //       ，     npm run build      webpack
  },
  "devDependencies": {
    "webpack": "^4.16.0",
    "webpack-cli": "^3.0.8"
  }

四、配置
1.
包装します.html-webpack-pluginを使います.

plugins: [  //     ,   ，    
        new HtmlWebpackPlugin({  //           css js  ,dist          ，   。      
            file: 'index.html', //                 
            template: 'src/index.html'  //vue-cli      
        }),
    ],

2.live-server
インストールが完了したらルートディレクトリに入ると、nodeサービスを直接起動できます.
3.js
babelbabelrcプロファイルでは、主にプリセットとプラグインを配置していますので、異なる変換器の役割が異なる構成項目は、大きく分けて以下の3つに分類されます.

シンタックス変換器

パッチ変換器

jsxとflowプラグイン

プリセットを作成(presets)

"presets": [
    [
      "@babel/preset-env",
      {     //options    :targets           
        "targets": {
          "chrome": 52,
          "browsers": [
            "last 2 versions",
            "safari 7"
          ]
        }
      }
    ],
    "@babel/preset-react",
    "@babel/preset-flow"
  ]

プラグイン(plugis)

 "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties",
      {
        "loose": true
      }
    ],"react-hot-loader/babel",[
    "@babel/plugin-transform-runtime",
    {
      // "regenerator": true
    }
  ]]

五、プロジェクトの最適化
実際の開発プロジェクトでは、パッケージ化されたファイルが大きすぎてページを開くのがとても遅いという状況に遭遇しました.多くの資料とブログを調べた後、簡単な最適化方法をまとめました.
1.パッケージ化プラグイン
name:webpack-bundle-anlyzer->BundeleAnalyzerPlugin概要:パッケージされたアイテムを可視化してブラウザに表示し、パッケージ化されたアイテムの名前の大きさなどを展示して、より便利に最適化することができます.

    // install
    sudo npm i -D webpack-bundle-analyzer
    
    // code
    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

    baseConfig.plugins.push(
       new BundleAnalyzerPlugin({ analyzerPort: 8082 })
    )

2.JSコード圧縮
name:webpack-parallel-glify-pluginプロファイル:PalelUglifyPluginを用いてパラレルに出力されたJSコードを圧縮し、具体的な圧縮内容を具体的に配置する.

    // install
    sudo npm i -D webpack-parallel-uglify-plugin
    
    // code 
    const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');

    new ParallelUglifyPlugin({
      //     UglifyJS    
      uglifyJS: {
        output: {
          //       
          beautify: false,
          //        
          comments: false,
        },
        compress: {
          //       `console`   ，    ie   
          drop_console: true,
          //                
          collapse_vars: true,
          //                        
          reduce_vars: true,
        }
      },
    })

3.ファイルプラグインを動的に導入する
name:dynamic-mport-webpack概要:Reactの怠惰なロードをサポートするために使用されます.そうでないとエラーが発生します.

    // install
    npm i -D dynamic-import-webpack
    
    //code     .babelrc    plugins 
    {
        "plugins": "dynamic-import-webpack",

    }