Webpack 速记

• 概念：模块打包工具
• 安装：npm i webpack webpack-cli -D
• 默认配置文件：webpack.config.js
• 模块解析依赖树支持语法(js)：
  ES Module (export -> import)
  同步加载模块：CommonJs ( module.exports -> require)  eg: nodejs
  
  注：
  异步加载模块：
    AMD（提前执行，模块依赖放在顶部。eg：require.js）；
    CMD（延迟执行，模块依赖放在任意需要的位置。eg：sea.js）；

  // AMD 依赖必须一开始就写好 
  define(['./a', './b'], function(a, b) {   
     a.doSomething()    
     // ...
     b.doSomething()    
     ...
  });
  // CMD 依赖可以就近书写   
  define(function(require, exports, module) {
     var a = require('./a')   
     a.doSomething()   
     // ...
     var b = require('./b') 
     b.doSomething()
     // ... 
  });

    UMD 是 CommonJs、CMD、AMD 的糅合（先判断是否支持Node.js的模块（exports），再判断是否支持AMD、CMD（define））。
• webpack.config.js 配置
  常用loader：
    js加载器: babel-loader（依赖：@babel/core、@babel/preset-env）
    css加载器：style-loader, css-loader，postcss-loader(添加厂商前缀，依赖：autoprefixer)
    图片加载器：file-loader, url-loader(可以转base64)
    字体加载器：url-loader
  常用plugin:
    html-webpack-plugin
    clean-webpack-plugin
    copy-webpack-plugin
    mini-css-extract-plugin
• 模拟webpack-dev-server：
  在node环境中执行webpack：webpack(config);
  在node环境使用中间件： webpack-dev-middleware 监听文件变化
• HMR(热模块更新)
  devServer.hot = true;
  plugins -> new webpack.HotModuleReplacementPlugin();
  js 文件 -> if(module.hot) module.hot.accept('filePath', function(){});
  // vue/react/css-loader 已经内置了HMR 的 if(module.hot) ...实现。
• babel

  {
    "presets": [
      [
        "@babel/preset-env",
        {
          "useBuiltIns": "usage"
        }
      ]
    ]
  }

    防止babel翻译的 es5 polyfill 放在全局变量：@babel/plugintransform-runtime
• TreeShaking (未使用部分代码不进行打包)
  注意：只支持 ES Module 模式使用
  配置：
    在 webpack.config.js 中配置：optimization.usedExports = true; 
    在 package.json 中配置TreeShaking忽略配置：sideEffects = ['*.css'] || false;
  提示：mode为 development 时不会真正删除多余的代码，production 时 optimization.usedExports 默认为 true;
• CodeSpliting（代码分割）
  配置：
    方式1：在 webpack.config.js 中配置：optimization.splitChunks.chunks = all; 
    方式2：按需加载：import(/* webpackPrefetch: true */ 'package').then(() => { ... });  // 依赖 @babel/plugin-syntax-dynamic-import
• css代码分割
  使用 mini-css-extract-plugin 插件（需要注意TreeShaking相关配置有可能会使其失效）。