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

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

优点&＃xff1a;

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

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

准备&＃xff1a;

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

我们准备三个js&＃xff1a;index.js&＃xff0c;  index2.js&＃xff0c;  a.js  

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

index.js:

require(&＃39;../css/index.css&＃39;);
// import Vue from "../lib/vue.js";
// import $ from "../lib/jquery-3.2.1.min.js";
import common from &＃39;./a.js&＃39;;
var vm &＃61; new Vue({el:"#app",data:{message1:"页面加载与"&＃43;new Date().toLocaleString(),}});$(document).ready(function(){//alert("测试$是否可用"&＃43;common.person[0].name);
});

index2.js

require(&＃39;../css/index2.css&＃39;);
// import Vue from "../lib/vue.js";
// import $ from "../lib/jquery-3.2.1.min.js";
import common from &＃39;./a.js&＃39;;
var vm &＃61; 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 &＃61; require("path");
// 引入插件
const HTMLWebpackPlugin &＃61; require("html-webpack-plugin");
// 清理 dist 文件夹
const CleanWebpackPlugin &＃61; require("clean-webpack-plugin")
// 抽取 css
const ExtractTextPlugin &＃61; require("extract-text-webpack-plugin");
const config &＃61; require("./config");
// 通过 html-webpack-plugin 生成的 HTML 集合
const webpack &＃61; require("webpack")//单独加入需要的第三方 js文件
//Entries[&＃39;vendor&＃39;]&＃61;[path.resolve(__dirname, &＃96;../app/lib/jquery-3.2.1.min.js&＃96;),path.resolve(__dirname, &＃96;../app/lib/vue.js&＃96;)];
// Entries[&＃39;Vue&＃39;]&＃61;path.resolve(__dirname, &＃96;../app/lib/vue.js&＃96;);;
module.exports &＃61; {entry:{index:path.resolve(__dirname,&＃96;../app/js/index.js&＃96;),index2:path.resolve(__dirname,&＃96;../app/js/index2.js&＃96;),vendor:[path.resolve(__dirname,&＃96;../app/lib/jquery-3.2.1.min.js&＃96;),path.resolve(__dirname,&＃96;../app/lib/vue.js&＃96;)]},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 的 publicPathpublicPath: config.cssPublicPath,use: [{loader:"css-loader",options:{// 开启 css 压缩minimize:true,}},{loader:"postcss-loader",}]})},{test: /\.js$/,exclude: /node_modules/,use: {loader: &＃39;babel-loader&＃39;,options: {presets: [&＃39;env&＃39;]}}},{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([&＃39;dist&＃39;], {root: path.resolve(__dirname, &＃39;../&＃39;), //根目录verbose: true, 　　　　　　　　　　//开启在控制台输出信息}),// 将 css 抽取到某个文件夹new ExtractTextPlugin(config.cssOutputPath), // 自动生成 HTML 插件//...HTMLPlugins,//功能&＃xff1a;不再需要import和require 引入 js可直接使用new webpack.ProvidePlugin({Vue: path.resolve(__dirname, &＃96;../app/lib/vue.js&＃96;),$: path.resolve(__dirname, &＃96;../app/lib/jquery-3.2.1.min.js&＃96;),jQuery: path.resolve(__dirname, &＃96;../app/lib/jquery-3.2.1.min.js&＃96;)}),// new HTMLWebpackPlugin({// filename: &＃96;${page}.html&＃96;,// template: path.resolve(__dirname, &＃96;../app/html/${page}.html&＃96;),// chunks: [page,&＃39;commons&＃39;,&＃39;vendor&＃39;]// }),new webpack.optimize.CommonsChunkPlugin({name: [&＃39;vendor&＃39;],filename: "[name].[hash].bundle.js",minChunks:Infinity}),new webpack.optimize.CommonsChunkPlugin({chunks:[&＃39;index&＃39;,&＃39;index2&＃39;],name: [&＃39;commons&＃39;],filename: "[name].[hash].bundle.js",minChunks: 2,}),],
}

重点&＃xff1a; 

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

公共代码抽取插件如下设置时&＃xff0c;表示&＃xff1a;

new webpack.optimize.CommonsChunkPlugin({name: [&＃39;vendor&＃39;],filename: "[name].bundle.js",minChunks:Infinity}),new webpack.optimize.CommonsChunkPlugin({chunks:[&＃39;index&＃39;,&＃39;index2&＃39;],name: [&＃39;commons&＃39;],filename: "[name].bundle.js",minChunks: 2,}),

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

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

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

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

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

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