webpack代码分割（https://webpack.js.org/guides/code-splitting/）

Code Splitting代码分割

 

代码分割是webpack最令人信服的特性，这个特性允许你将代码分割为不同的部分，然后按需加载或者并行加载。它可以用于获得更小的打包文件、按照加载优先级控制资源，进而减少加载时间。（将原先集中到一个 output.js 中的代码，切割成若干个 js 文件，然后分别进行加载。原先只加载 output.js ，现在把代码分割到3个文件中，先加载 output.js ，然后 output.js 又会自动加载 1.output.js 和 2.output.js 。）

有3个代码分割的通用方法

》入口点：利用entry配置手动进行代码分割

》杜绝重复：利用CommonsChunkPlugin插件删除重复的代码、分割chunks代码

》动态引入： Split code via inline function calls within modules.

 

 一、利用entry手动分割

 

webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    index: './src/index.js',
    another: './src/another-module.js'
  },
  plugins: [
    new HTMLWebpackPlugin({
      title: 'Code Split