到目前为止，我们打包出来的文件，只有一个bundle.js这么一个js文件。
那么如果项目大了，这个js则会变得非常大！这会导致首屏加载的时间变得非常长。而其中很多代码并不是立马就需要使用的，这样直接全部引入很浪费资源。所以我们可以让它代码分离，按需引入。

一，代码分离的方法概述

第一种：手动配置entry文件

设置多个入口文件，但是这种方法有个问题，当多个入口文件有共享的代码，这些共享的代码则会被重复打包。

第二种方法：入口进行配置

在入口进行配置，使用Entry dependencies或者SplitChunksPlugin去重和分离代码。

第三种方法：模块的内联函数

通过import这样的模块的内联函数调用来分离代码。

二，手动配置entry文件

原来的配置是这样：

 entry: "./src/index.js",//设置打包入口
output: {
   path: path.resolve(__dirname, "dist"),//设置打包的出口,需要是绝对路径，而__dirname是node的一个全局变量，记录当前文件的绝对路径
   filename: "bundle.js",//设置打包出来的js的文件名
   clean:true,//清除上次打包出来的文件
   assetModuleFilename:'images/[contenthash][ext]',//自定义asset module资源打包后的路径和名字
 },

设置webpack:

 entry: {
    index: "./src/index.js", //设置打包入口,
    another: "./src/another_module.js"//设置另一个入口文件
  },
  output: {
    path: path.resolve(__dirname, "dist"), 
    filename: "[name]_bundle.js", //这里设置不同入口文件打包出来的js包不同名字
    clean: true, 
    assetModuleFilename: "images/[contenthash][ext]" 
  },

现在在入口文件的同级目录下新建another.index.js文件：

打包后会发现这两个文件：

当在index.js入口文件中也引入loadsh时，会发现被重复打包，index_bundle.js会变得很大。

所以说，当多个入口文件有共享的代码，这些共享的代码则会被重复打包。

三，配置入口文件为模块导入，抽离公用代码

配置webpack：

  entry: {
    index: {
      import: "./src/index.js", //设置打包入口,
      dependOn: "shared"
    },
    another: {
      import: "./src/another_module.js",
      dependOn: "shared"
    },
    shared: "lodash"
  },
  output: {
    path: path.resolve(__dirname, "dist"), //设置打包的出口,需要是绝对路径，而__dirname是node的一个全局变量，记录当前文件的绝对路径
    filename: "[name]_bundle.js", //设置打包出来的js的文件名
    clean: true, //清除上次打包出来的文件
    assetModuleFilename: "images/[contenthash][ext]" //自定义asset module资源打包后的路径和名字
  },

于是可以看到，它把公用代码，lodash库打包到了一个单独的js文件中，这种做法，需要配置者熟练地知晓哪些入口文件公用了哪些代码库：如这里就是lodash是公用的。

此外，webpack还提供了一个内置的插件，帮助我们把这些公共的模块抽离出来：

 entry: {
    index: "./src/index.js", //设置打包入口,
    another: "./src/another_module.js"
  },
  output: {
    path: path.resolve(__dirname, "dist"), //设置打包的出口,需要是绝对路径，而__dirname是node的一个全局变量，记录当前文件的绝对路径
    filename: "[name]_bundle.js", //设置打包出来的js的文件名
    clean: true, //清除上次打包出来的文件
    assetModuleFilename: "images/[contenthash][ext]" //自定义asset module资源打包后的路径和名字
  },
   optimization: {
    minimizer: [new CssMinimizerPlugin()],
    splitChunks: {//这里配置使用这个插件
      chunks: "all"
    }
  }

再执行npx webpack就会发现，它会自动识别并抽离公共的模块：

四，动态导入

使用import作为代码分割，进行代码的切分。

webpack的配置采用最基础的：

 entry: "./src/index.js", //设置打包入口,
  output: {
    path: path.resolve(__dirname, "dist"), //设置打包的出口,需要是绝对路径，而__dirname是node的一个全局变量，记录当前文件的绝对路径
    filename: "[name]_bundle.js", //设置打包出来的js的文件名
    clean: true, //清除上次打包出来的文件
    assetModuleFilename: "images/[contenthash][ext]" //自定义asset module资源打包后的路径和名字
  },

运行npx webpack打包之后，会发现生成了这个新的包：

再结合上文，手动配置入口文件，抽离公用代码的配置加上：

entry: {
    index: "./src/index.js", //设置打包入口,
    another: "./src/another_module.js"
  },
/....../
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
    splitChunks: {
      chunks: "all"
    }
  }

然后打包，会发现静态导入和动态导入都进行切分了，导出了不同的js: