1 结构

一个 create-react-app 下 webpack.config.js 的结构如下:

  1. config
  2. ├── mode
  3. ├── target
  4. ├── devtool
  5. ├── entry
  6. ├── output
  7. ├── optimization
  8. └── splitChunks
  9. ├── chunks
  10. ├── name
  11. └── cacheGroups
  12. ├── resolve
  13. ├── modules
  14. └── alias
  15. ├── resolveLoader
  16. └── plugins
  17. ├── module
  18. └── rules
  19. ├── plugins
  20. └── externals

2 详细

2.1 resolve

Configure how modules are resolved. For example, when calling import 'lodash' in ES2015, the resolve options can change where webpack goes to look for 'lodash' (see modules).

2.1.1 resolve.modules

Tell webpack what directories should be searched when resolving modules.

const path = require('path');

module.exports = {
  //...
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  }
};

2.1.2 resolve.alias

const path = require('path');

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};

2.2 resolveLoader

This set of options is identical to the resolve property set above, but is used only to resolve webpack’s loader packages.

module.exports = {
  //...
  resolveLoader: {
    modules: ['node_modules'],
    extensions: ['.js', '.json'],
    mainFields: ['loader', 'main']
  }
};

2.3 optimization

2.3.1 splitChunks.cacheGroups

控制打包分组的?

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      maxSize: 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
        }
      }
    }
  }
};

3 Reference