webpack3 CommonsChunkPlugin插件分离三方库（jQuery.js/vue.js等）和公共模块 分别打包

需求：使用webpack进行打包时，我们不想自己写的js文件与第三方的js库一起打包成一个庞大的文件，而是想要第三方插件库单独打包一个js 。我们自己写的js独立打包。

 

优点：

1.分割js文件避免单独一个js文件太大影响用户使用体验。

2.通常来说，第三方库文件我们不会去变动里面的内容，每次打包变动内容基本是在我们自己的js文件中，所以单独打包比较好。

 

准备：

想要实现js分别打包需要CommonsChunkPlugin插件，该插件webpack自带 所以不需要另外下载。

我们准备三个js：index.js，  index2.js，  a.js  

在index.js  index2.js 中 都使用了 本地vue.js  jQurey.js两个三方js   和a.js(自己的公共js)，我们想要打包时三方插件打在一个包（vendor.js），自己写的公共js打在（commons.js）

index.js:

require('../css/index.css');
// import Vue from "../lib/vue.js";
// import $ from "../lib/jquery-3.2.1.min.js";
import common from './a.js';
var vm = new Vue({
		el:"#app",
		data:{
			message1:"页面加载与"+new Date().toLocaleString(),
	
		}

});


$(document).ready(function(){
	//alert("测试$是否可用"+common.person[0].name);
});

index2.js

require('../css/index2.css');
// import Vue from "../lib/vue.js";
// import $ from "../lib/jquery-3.2.1.min.js";
import common from './a.js';
var vm = new Vue({
		el:"#app",
		data:{
			message:"First Vue Test ."
		}
});
$(document).ready(function(){
	alert("测试$是否可用2");
});

a.js

/*!
 * a.js
 * (c) 2020-4-20 By WB
 * 
 */
export default {
	person:[{name:"小黄",sex:"男"},{name:"小明",sex:"女"}],
	number:56,
	
}

 

 webpack.config.js

const path = require("path");
// 引入插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
// 清理 dist 文件夹
const CleanWebpackPlugin = require("clean-webpack-plugin")
// 抽取 css
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const config = require("./config");
// 通过 html-webpack-plugin 生成的 HTML 集合
const webpack = require("webpack")


//单独加入需要的第三方 js文件
//Entries['vendor']=[path.resolve(__dirname, `../app/lib/jquery-3.2.1.min.js`),path.resolve(__dirname, `../app/lib/vue.js`)];
// Entries['Vue']=path.resolve(__dirname, `../app/lib/vue.js`);;
module.exports = {
    entry:{
		index:path.resolve(__dirname,`../app/js/index.js`),
		index2:path.resolve(__dirname,`../app/js/index2.js`),
		vendor:[path.resolve(__dirname,`../app/lib/jquery-3.2.1.min.js`),path.resolve(__dirname,`../app/lib/vue.js`)]
	},
    devtool:"cheap-module-source-map",
    output:{
        filename:"js/[name].bundle.[hash].js",
        path:path.resolve(__dirname,"../dist")
    },
    // 加载器
    module:{
        rules:[
            {
                // 对 css 后缀名进行处理
                test:/\.css$/,
                // 不处理 node_modules 文件中的 css 文件
                exclude: /node_modules/,
                // 抽取 css 文件到单独的文件夹
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    // 设置 css 的 publicPath
                    publicPath: config.cssPublicPath,
                    use: [{
                            loader:"css-loader",
                            options:{
                                // 开启 css 压缩
                                minimize:true,
                            }
                        },
                        {
                            loader:"postcss-loader",
                        }
                    ]
                })
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use:{
                    loader:"file-loader",
                    options:{
                        // 打包生成图片的名字
                        name:"[name].[ext]",
                        // 图片的生成路径
                        outputPath:config.imgOutputPath
                    }
                }
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use:["file-loader"]
            }
        ],
    },
    plugins:[
        // 自动清理 dist 文件夹
        new CleanWebpackPlugin(['dist'], {
		   root: path.resolve(__dirname, '../'),   //根目录
		   verbose:  true,        　　　　　　　　　　//开启在控制台输出信息
		}),
        // 将 css 抽取到某个文件夹
        new ExtractTextPlugin(config.cssOutputPath),        
        // 自动生成 HTML 插件
        //...HTMLPlugins,
		//功能：不再需要import和require 引入  js可直接使用
		new webpack.ProvidePlugin({
		    Vue: path.resolve(__dirname, `../app/lib/vue.js`),
		    $: path.resolve(__dirname, `../app/lib/jquery-3.2.1.min.js`),
		    jQuery: path.resolve(__dirname, `../app/lib/jquery-3.2.1.min.js`)
		}),
		// new HTMLWebpackPlugin({
		//     filename: `${page}.html`,
		//     template: path.resolve(__dirname, `../app/html/${page}.html`),
		// 	chunks: [page,'commons','vendor']
		// }),
		new webpack.optimize.CommonsChunkPlugin({
		    name: ['vendor'],
		    filename: "[name].[hash].bundle.js",
			minChunks:Infinity
		}),
		new webpack.optimize.CommonsChunkPlugin({

			chunks:['index','index2'],
		    name: ['commons'],
		    filename: "[name].[hash].bundle.js",
			minChunks: 2,
		}),
    ],
}

重点： 

我们在entry中设置了vendor:[path.resolve(__dirname,`../app/lib/jquery-3.2.1.min.js`),path.resolve(__dirname,`../app/lib/vue.js`)]

公共代码抽取插件如下设置时，表示：

		new webpack.optimize.CommonsChunkPlugin({
		    name: ['vendor'],
		    filename: "[name].bundle.js",
			minChunks:Infinity
		}),
		new webpack.optimize.CommonsChunkPlugin({

			chunks:['index','index2'],
		    name: ['commons'],
		    filename: "[name].bundle.js",
			minChunks: 2,
		}),

1.将三方插件代码抽取为一个名为verdor.bundle.js的文件。

2.除了三方插件，将index index2两个js文件都调用的自己写的公共js抽取为一个名字为commons.bundle.js的文件

*minChunks:表示最小多少个entry里的入口文件调用了相同的公共js，才回执行抽取公共代码操作

       值为2表示最少两个入口文件调用了某个公共js 本例index index2都调用了a.js 所以将其抽取生产commons.bundle.js

       值为minChunks:Infinity时 网上答案比较绕口 你可以理解为：verdor.bundle.js里 只会打包在entry入口处vendor设置的三方插件。而不会打包index index两个js调用的a.js 否则不设置时如下结果 自己的a.js也被打包 没有成功打包到commons.budls.js

*chunks:['index','index2']: 表示只在这两个js文件中分析他们相同的引用js  如果不设置，则默认分析entry中所有设置的js入口文件 我们index index两个js都引用了 a.js  满足minChunks：2  所以结果如下图