webpack 4学習ノート(二)

webpack包装各種javascriptファイル
(本文は学習記録を提供するだけで、ほとんどの内容はネットから来る)
 
一つは、jsファイルとs 6コードを包装します.
1,webpackコマンドはjsファイルを包装します.
Tip:webpack 4.xの前に直接にコマンドラインツールにwebpackコマンドを使用することができます.webpack 4.xの後にwebpack-cliをインストールする必要があります.

1  webpack --entry .\src\app.js --output ./src/b.js --mode development

 
webpack--entry--output--modeモード
もっと具体的なパラメータは可能です.webpack--help

Config options:
  --config               Path to the config file
                         [string] [default: webpack.config.js or webpackfile.js]
  --config-register, -r  Preload one or more modules before loading the webpack
                         configuration      [array] [default: module id or path]
  --config-name          Name of the config to use                      [string]
  --env                  Environment passed to the config, when it is a function
  --mode                 Enable production optimizations or development hints.
                                  [choices: "development", "production", "none"]

Basic options:
  --context    The base directory (absolute path!) for resolving the `entry`
               option. If `output.pathinfo` is set, the included pathinfo is
               shortened to this directory.
                                       [string] [default: The current directory]
  --entry      The entry point(s) of the compilation.                   [string]
  --watch, -w  Enter watch mode, which rebuilds on file change.        [boolean]
  --debug      Switch loaders to debug mode                            [boolean]
  --devtool    A developer tool to enhance debugging.                   [string]
  -d           shortcut for --debug --devtool eval-cheap-module-source-map
               --output-pathinfo                                       [boolean]
  -p           shortcut for --optimize-minimize --define
               process.env.NODE_ENV="production"                       [boolean]
  --progress   Print compilation progress in percentage                [boolean]

Module options:
  --module-bind       Bind an extension to a loader                     [string]
  --module-bind-post  Bind an extension to a post loader                [string]
  --module-bind-pre   Bind an extension to a pre loader                 [string]

Output options:
  --output, -o                  The output path and file for compilation assets
  --output-path                 The output directory as **absolute path**
                                (required).
                                       [string] [default: The current directory]
  --output-filename             Specifies the name of each output file on disk.
                                You must **not** specify an absolute path here!
                                The `output.path` option determines the location
                                on disk the files are written to, filename is
                                used solely for naming the individual files.
                                                   [string] [default: [name].js]
  --output-chunk-filename       The filename of non-entry chunks as relative
                                path inside the `output.path` directory.
       [string] [default: filename with [id] instead of [name] or [id] prefixed]
  --output-source-map-filename  The filename of the SourceMaps for the
                                JavaScript files. They are inside the
                                `output.path` directory.                [string]
  --output-public-path          The `publicPath` specifies the public URL
                                address of the output files when referenced in a
                                browser.                                [string]
  --output-jsonp-function       The JSONP function used by webpack for async
                                loading of chunks.                      [string]
  --output-pathinfo             Include comments with information about the
                                modules.                               [boolean]
  --output-library              Expose the exports of the entry point as library
                                                                         [array]
  --output-library-target       Type of library
         [string] [choices: "var", "assign", "this", "window", "self", "global",
      "commonjs", "commonjs2", "commonjs-module", "amd", "umd", "umd2", "jsonp"]

Advanced options:
  --records-input-path       Store compiler state to a json file.       [string]
  --records-output-path      Load compiler state from a json file.      [string]
  --records-path             Store/Load compiler state from/to a json file. This
                             will result in persistent ids of modules and
                             chunks. An absolute path is expected. `recordsPath`
                             is used for `recordsInputPath` and
                             `recordsOutputPath` if they left undefined.[string]
  --define                   Define any free var in the bundle          [string]
  --target                   Environment to build for                   [string]
  --cache                    Cache generated modules and chunks to improve
                             performance for multiple incremental builds.
                      [boolean] [default: It's enabled by default when watching]
  --watch-stdin, --stdin     Stop watching when stdin stream has ended [boolean]
  --watch-aggregate-timeout  Delay the rebuilt after the first change. Value is
                             a time in ms.                              [number]
  --watch-poll               Enable polling mode for watching           [string]
  --hot                      Enables Hot Module Replacement            [boolean]
  --prefetch                 Prefetch this request (Example: --prefetch
                             ./file.js)                                 [string]
  --provide                  Provide these modules as free vars in all modules
                             (Example: --provide jQuery=jquery)         [string]
  --labeled-modules          Enables labeled modules                   [boolean]
  --plugin                   Load this plugin                           [string]
  --bail                     Report the first error as a hard error instead of
                             tolerating it.            [boolean] [default: null]
  --profile                  Capture timing information for each module.
                                                       [boolean] [default: null]

Resolving options:
  --resolve-alias         Redirect module requests                      [string]
  --resolve-extensions    Redirect module requests                       [array]
  --resolve-loader-alias  Setup a loader alias for resolving            [string]

Optimizing options:
  --optimize-max-chunks      Try to keep the chunk count below a limit
  --optimize-min-chunk-size  Minimal size for the created chunk
  --optimize-minimize        Enable minimizing the output. Uses
                             optimization.minimizer.                   [boolean]

Stats options:
  --color, --colors               Force colors on the console
                                           [boolean] [default: (supports-color)]
  --no-color, --no-colors         Force no colors on the console       [boolean]
  --sort-modules-by               Sorts the modules list by property in module
                                                                        [string]
  --sort-chunks-by                Sorts the chunks list by property in chunk
                                                                        [string]
  --sort-assets-by                Sorts the assets list by property in asset
                                                                        [string]
  --hide-modules                  Hides info about modules             [boolean]
  --display-exclude               Exclude modules in the output         [string]
  --display-modules               Display even excluded modules in the output
                                                                       [boolean]
  --display-max-modules           Sets the maximum number of visible modules in
                                  output                                [number]
  --display-chunks                Display chunks in the output         [boolean]
  --display-entrypoints           Display entry points in the output   [boolean]
  --display-origins               Display origins of chunks in the output
                                                                       [boolean]
  --display-cached                Display also cached modules in the output
                                                                       [boolean]
  --display-cached-assets         Display also cached assets in the output
                                                                       [boolean]
  --display-reasons               Display reasons about module inclusion in the
                                  output                               [boolean]
  --display-depth                 Display distance from entry point for each
                                  module                               [boolean]
  --display-used-exports          Display information about used exports in
                                  modules (Tree Shaking)               [boolean]
  --display-provided-exports      Display information about exports provided
                                  from modules                         [boolean]
  --display-optimization-bailout  Display information about why optimization
                                  bailed out for modules               [boolean]
  --display-error-details         Display details about errors         [boolean]
  --display                       Select display preset
              [string] [choices: "", "verbose", "detailed", "normal", "minimal",
                                                          "errors-only", "none"]
  --verbose                       Show more details                    [boolean]
  --info-verbosity                Controls the output of lifecycle messaging
                                  e.g. Started watching files...
                 [string] [choices: "none", "info", "verbose"] [default: "info"]
  --build-delimiter               Display custom text after build output[string]

2,プロファイルで包装します.

const path = require('path');

module.exports = {
  mode: "production", // "production" | "development" | "none"  // Chosen mode tells webpack to use its built-in optimizations accordingly.

  entry: "./app/entry", // string | object | array  //           
　//entry: ["./app/entry1", "./app/entry2"]
  //entry: { 
　//　　　a: "./app/entry-a",
　//　　　b: ["./app/entry-b", "./app/entry-b"]
　//　}　
  // webpack     

  output: {
    // webpack            

    path: path.resolve(__dirname, "dist"), // string
    //            
    //        （   Node.js   path   ）

    filename: "bundle.js", // string    // 「    (entry chunk)」      （    ？）

    publicPath: "/assets/", // string    //          ，url     HTML   

    library: "MyLibrary", // string,
    //    (exported library)   

    libraryTarget: "umd", //           //    (exported library)   

    /*       （    ） */  },

  module: {
    //       

    rules: [
      //     （   loader、      ）

      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, "app")
        ],
        exclude: [
          path.resolve(__dirname, "app/demo-files")
        ],
        //        ，                  
        // test   include        ，        
        // exclude        （    test   include）
        //     ：
        // -    test                 
        // -   include   exclude          
        // -      exclude，       include

        issuer: { test, include, exclude },
        // issuer   （   ）

        enforce: "pre",
        enforce: "post",
        //         ，      （    ）

        loader: "babel-loader",
        //       loader，        
        //      ，`-loader`     webpack 2        
        //    webpack 1     。

        options: {
          presets: ["es2015"]
        },
        // loader     
      },

      {
        test: /\.html$/,
        test: "\.html$"

        use: [
          //      loader    
          "htmllint-loader",
          {
            loader: "html-loader",
            options: {
              /* ... */
            }
          }
        ]
      },

      { oneOf: [ /* rules */ ] },
      //            

      { rules: [ /* rules */ ] },
      //           （      ）

      { resource: { and: [ /*    */ ] } },
      //              

      { resource: { or: [ /*    */ ] } },
      { resource: [ /*    */ ] },
      //          （     ）

      { resource: { not: /*    */ } }
      //         
    ],

    /*       （    ） */  },

  resolve: {
    //          
    // （      loader   ）

    modules: [
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    //          

    extensions: [".js", ".json", ".jsx", ".css"],
    //       

    alias: {
      //       

      "module": "new-module",
      //    ："module" -> "new-module"   "module/path/file" -> "new-module/path/file"

      "only-module$": "new-module",
      //     "only-module" -> "new-module"，     "only-module/path/file" -> "new-module/path/file"

      "module": path.resolve(__dirname, "app/third/module.js"),
      //     "module" -> "./app/third/module.js"   "module/file"      
      //               
    },
    /*          （    ） */
    /*       （    ） */  },

  performance: {
    hints: "warning", //       maxAssetSize: 200000, //     （      ）
    maxEntrypointSize: 400000, //     （      ）
    assetFilter: function(assetFilename) {
      //             
      return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
    }
  },

  devtool: "source-map", // enum  //           (browser devtools)      (meta info)    
  //          `source-map'      。

  context: __dirname, // string（    ！）
  // webpack     
  // entry   module.rules.loader   
  //         

  target: "web", //     //  (bundle)       
  //         (chunk loading behavior)       (available module)

  externals: ["react", /^@angular\//],  //     /      ，              

  stats: "errors-only",  //          bundle   

  devServer: {
    proxy: { // proxy URLs to backend development server
      '/api': 'http://localhost:3000'
    },
    contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
    compress: true, // enable gzip compression
    historyApiFallback: true, // true for index.html upon 404, object for multiple paths
    hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
    https: false, // true for self-signed, object for cert authority
    noInfo: true, // only errors & warns on hot reload
    // ...
  },

  plugins: [
    // ...
  ],
  //       


  /*     （    ） */}

 
説明: 
1,設定ファイルを実行して、package.jsonの下の‘scripts’に追加できます.「"build":「webpack--config webpack.co.nfig.js」｝で、設定ファイルのデフォルトの名前はwebpack.co fig.jsで、他の名前ならconfigで確認できます.
2,entry対象はwebpackのパッケージの入口ファイルです.webpackは、entryの構成に従って、入口ファイルとすべての依存ファイルを検索して、bundleを構築します.
3,outputオブジェクトはwebpackがどのように出力するかを指示しています.また、どこであなたの「bundle,assetと他のあなたが包装したものやwenbackを使ってロードしたもの」を出力しますか?
 
3,webpackはbabelに合わせてES 6、7を包装します.
ES 6の普及と心遣いによって、ほとんどの項目でエス6文法が使われます.しかし、ブラウザのサポートは友好的ではないので、ほとんどのブラウザで解析できるようにS 6を降格させる必要があります.バベルはこのような役割をする道具です.
babel-loader:ただお知らせの役割を果たして、babelに仕事が必要だと通知しました.webpackでは、このようにしています.
　　

　　module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                     loader: 'babel-loader',
                     options:  { //               ，    ‘.babelrc’          
         　　　　　　　　 presets: ['@babel/preset-env']，// babel  
          　　　　　　　　plugin: ['@babel/plugin-proposal-object-rest-spread'] //         
        　　　　　　　　}
                 }
            }
　　}                

babel-core
と言えば  babel-loader webpackにjsファイルのコード互換性をコンパイルしたいと伝えました.それではwebpackは次はbabelを探します.bableの入り口は  babel-core ,それを通して、webpackは各种babelのappiを使うことができます.
 
babel-preset-env
まず、歴史背景を紹介して、バベル-preset-envを理解して学習するのに役立ちます.
最初は、開発者が早く新しいJS特性を使うことができるように、BabelチームがBabel-prest-latestを開発しました.このpresetは特別なもので、複数のpresetの集合(es 2015＋)であり、ECMA仕様の更新に伴ってその内容をさらに増やす.
例えば、現在(2018.06.02)は、preset 2017、es 1016、es 2015を含む.
来年になると、それが含まれているかもしれないpresetは以下の通りです.2018、ess 2017、ess 2016、ess 2015.
時間が経つにつれて、Babel-prester-latestに含まれるプラグインはますます多くなりました.これは以下の問題をもたらしました.

にロードされたプラグインはますます多くなり、コンパイル速度はますます遅くなります.

は、ユーザブラウザのアップグレードに伴い、ECMA仕様のサポートが徐々に改善され、低バージョン仕様へのコンパイルの必要性が減少している(例えば、ES 6−＞ES 5).

上記の問題の存在のために、Babel公式はBabel-prest-envプラグインを発売しました.開発者の設定に従って、必要に応じてプラグインをロードすることができます.設定項目は大体含まれています.

は、node、ブラウザなどのサポートが必要です.

はサポートされているプラットフォームのバージョンを必要とします.例えばサポート[email protected]など

デフォルトの設定の場合は、babel-prest-latestと同等で、ess 2015から始まるすべてのprestをロードします.
設定ファイル.babelrcは以下の通り、現在はデフォルトの設定です.

{
  "presets": [ "env" ]
}

同時にnodeとブラウザのバージョンに対して異なる構成を行うことができます.例えば、IE 8+、chrome 2+をサポートする必要があります.

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [ "ie >= 8", "chrome >= 62" ]
      }      
    }]
  ]
}

プロビジョニングはES 6文法のみをあなたの指定したESバージョンの文法にコンパイルすることができます.  Array.from このようなAPIは彼には何もできません.じゃ、どうすればいいですか?
babel-polypill、babel-runtime
Babel-polypillはes 6の新しい方法の解決策を提供していますが、使う時は入口のファイル全体に導入されて、グローバル変数を汚染するので、Babel-runtimeが必要です.このように大域的に導入しないでください.グローバル変数の汚染を引き起こします.
　　

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [ "ie >= 8", "chrome >= 62" ]
      }      
    }]
  ]，
  "plugins": ["transform-runtime"]   //
}

 
転載先:https://www.cnblogs.com/panhe-xue/p/10269666.html