webpck抽离第三方类库

前面介绍了webpack两种引用第三方类库的方法ProvidePlugin和import

• import方法：
  • 属于局部引用，但是引用后不管你是否使用该类库都会将该类库打包，这样会造成代码冗余
• ProvidePlugin：
  • 属于全局引用，但只有在使用此类库的时候才将类库打包，所以建议在工作中使用此方法进行引用

抽离第三方类库

1. 安装第三方类库，我这里以jquery、vue为例

npm i -S jquery vue

2. 修改webpack.config.js的入口属性

   
   image.png

//  ./webpack.config/entry.js
let entry = {}

entry.path = {
    entry: './src/entry.js',
    print: './src/console.js',
    jquery: 'jquery',
    vue: 'vue'
}

module.exports = entry

3. 引入插件

plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: ['jquery', 'vue'],    //引用多个第三方类库时，使用数组形式，值位入口文件的属性名
        filename: "assets/js/[name].js",    //打包的路径
        minChunks: 2    //最小打包的文件模块数，这里直接写2就好(固定值)
    })
]

结果：

image.png