Webpack和Code Splitting

一.Webpack和Code Splitting之间的关系
Code Splitting指的是代码分割，什么是代码分割，代码分割和webpack有什么关系呢

CleanWebpackPlugin只能清理当前目录生成的dist文件，不可以删除当前目录同级的dist文件

  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}),
    new CleanWebpackPlugin (['../dist'])
  ]

这样处理是会报错的，可以写一个root子的配置项，放置绝对路径，这里指的是根路径是root定义的根路径

  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'}),
    new CleanWebpackPlugin (['dist'], {
      root: path.resolve(__dirname, '../')
    })
  ]

现在路径指向了根路径，所以删除该路径下的dist文件

回归正题Code Splitting是什么？

在项目中引入lodash第三方包 npm install lodash 它是一个功能集合，提供了很多功能方法，可以让我们高效能的去使用一些字符拼装的一些函数等等
在index.js中使用：

import _ from 'lodash';
console.log(_.join(['a', 'b', 'c']))

我们打包生成的dist文件下，有main.js，也就是我们打包的过程中，lodash这个工具库和业务代码都被打包到了一个文件中，假设一个文件对应的业务非常非常的长，此时又引入了工具库，这种方式的打包，生成的js文件非常的大，加载