webpack笔记（8）打包和抽离第三方类库

普通引入JQuery

npm 安装 ：

npm install --save jquery

将jquery引入入口文件.js

import $ from 'jquery';

 

用plugin引入

在webpack.config.js配置

const webpack = require('webpack');

module.exports = {
    plugins:[
        new webpack.ProvidePlugin({
            $:"jquery"
        })
    ]
}

 

抽离Jquery

constc  webpack = require('webpack');
module.exports = {
    entry:{
        jquery:'jquery'
    },
    ,plugins:[
        new webpack.optimize.CommonsChunkPlugin({
            //name对应入口文件中的名字，我们起的是jQuery
            name:['jquery','vue'],
            //把文件打包到哪里，是一个路径
            filename:"assets/js/[name].js",
            //最小打包的文件模块数，这里直接写2就好
            minChunks:2
        })
    ]
}

注：4.x版本后不支持 CommonsChunkPlugin

4.x版本后抽离JS

module.exports = {
    optimization : {
        splitChunks: {
            cacheGroups: {
                //命名不限于jquery
                jquery: {
                    chunks: "initial",
                    name: "jquery",
                    enforce: true
                }
            }
        }
    }
}