webpack分包

提示在前：文件中import的文件，不使用依然是會被打進包裏的，所以項目中儘量移除沒用到的import

 文中BundleAnalyzerPlugin是分析打包結果用的

CleanWebpackPlugin是每次打包結果生成前清除之前打包結果的文件夾用的（可以自定義匹配正則，默認爲dist）,注意webpack4中引入需加花括號

htmlWebpackPlugin是生成頁面用的，注意要加inject: true，這樣使用了template模板文件後會追加打包js到新生成的html中

分包預警：

optimization.splitChunks.cacheGroups對象中 vendors和abc 是除了entry定義的chunk之外，後續追加的chunk, 你可以在plugins中，選擇性地追加到各個new htmlWebpackPlugin實例配置中，如 chunks: ['main', 'abc']，具體代碼看下圖👇

const path = require('path');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const htmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = { 
  entry: {
    main: './src/index.js',
    index: './src/mymy.js',
  },
  output: {
    path: path.join(__dirname, '/dist'),
    filename: '[name].[chunkhash].js'
  },
  mode: 'development',
  resolve: {
    extensions: ['.js']
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 50,
      // maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name(module, chunks, cacheGroupKey) {// 新的chunk 名爲 vendor
        return 'whoimi'
      },
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          name: 'vendors',
        },
        abc: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
          name: 'abc',
        }
      }
    }
  },
  stats: { children: false },
  devtool: 'eval-source-map',
  plugins: [
    new htmlWebpackPlugin({
      filename: 'main.html',
      template: path.resolve(__dirname, './src/views/index.html'),
      inject: true,
      chunks: ['main', 'abc'],
      hash: true
    }),
    new htmlWebpackPlugin({
      filename: 'index.html',
      template: path.resolve(__dirname, './src/views/index.html'),
      inject: true,
      chunks: ['index', 'abc'],
      hash: true
    }),
    new BundleAnalyzerPlugin(),
    new CleanWebpackPlugin()
  ]
}

附上git地址 https://github.com/xss392795158/test-webpack