mode: development\production

entry

output

devtool

  1. contentBase
  2. open
  3. port
  4. proxy
  5. hot

optimization

  1. tree shaking: 过滤导入没用的代码；production下默认关上
    package.json: sideEffects

  2. code splitting 代码宰割

    默认配置splitChunks: {   chunks: 'async',   minSize: 20000,   minRemainingSize: 0,   minChunks: 1, // 援用次数   maxAsyncRequests: 30, // 最大并行申请数   maxInitialRequests: 30, // 入口点最大并行申请数   enforceSizeThreshold: 50000,   cacheGroups: {     defaultVendors: { // 第三方包       test: /[\\/]node_modules[\\/]/,       priority: -10,       reuseExistingChunk: true,     },     default: { // 业务代码       minChunks: 2,       priority: -20,       reuseExistingChunk: true,     },   },}

    缓存： output：filename: [name].[contenthash].js

    shimming

    懒加载 lazy loading：通过import动静引入，实现懒加载（webpackPrefetch、webpackPreload）

    打包剖析 webpack-bundle-analyzer

    css 代码宰割