21第三方类库抽离

以分离jquery库和vue为例：

1. 安装jquery
   

   npm install jquery –save

2. 在entry.js里面使用jquery代码：
   $(‘#title’).html(‘你还好吗？’);

3. 在webpack.config.js里面引入jquery插件

   new webpack.ProvidePlugin({
     $:'jquery'
   }),

   在最上面要写：var webpack=require(‘webpack’);

以上代码是之前完成过的

jquery和vue分离：

第一步 ：修改webpack.config.js里面的代码

• 修改入口

  entry:{
      entry:'./src/entry.js',    //下面的entry是随便起的名字
      entry2:'./src/entry2.js',    //有两个入口也要有两个出口
      jquery:'jquery',
      vue:'vue'
    },

• plugins和optimization同级：

  //分离第3方类库（jquery）
    optimization: {
      splitChunks: {
          cacheGroups: {
            commons: {
                name: "assets/js/jquery.js",
                chunks: "initial",
                minChunks: 2
            }
          },
          cacheGroups:{
            commons:{
              name:"assets/js/vue.js",
              chunks:"initial",
              minChunks:2
            }
          }
      }
    },

第二步 ：删除dist文件夹，在终端使用webpack进行打包，如果在dist/assets/js目目录下能看到jquery.js和vue.js即分离成功

注意：如果只分离一种类库，只在optimization中只写一个cacaheGroups即可！