[Webpack] to use in splitChunk

Suitable for use in a multi-inlet Packing

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: {
    a: './src/a.js',
    b: './src/b.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].bundle.js',
  },
  optimization: {
    // async 异步(import()语法) initial(同步import xxx from 'xxx') all(所有)
    splitChunks: {
      chunks: 'initial'
    }
  }
}

inlet a and b have introduced the inlet jquery, when packaging were also packed into the inside of each module, we can extract the same module

There are some parameters, the word did not see the vendors, the default set here

  optimization: {
    splitChunks: {
      chunks: 'initial',
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
  },

Try to name other

  optimization: {
    splitChunks: {
      chunks: 'initial',
      cacheGroups: {
        common: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10
        }
      }
    }
  },

It is this

You can define a number of rules

For example, we want to react and react-dom play a packet, vue make a package and vuex

  optimization: {
    splitChunks: {
      chunks: 'initial',
      cacheGroups: {
        vue: {
          test: /[\\/]node_modules[\\/](react|react-dom)/,
          priority: -1
        },
        react: {
          test: /[\\/]node_modules[\\/](vue|vuex)/,
          priority: -2
        }
      }
    }
  },

The default introduced node_modules extracted file is called common name vendors

You can customize different processing modules, write priority, default -10 A digital large processing.

[Webpack] to use in splitChunk

Guess you like