引入第三方库通常有3种方法
1、npm 包管理： 目前最常用和最推荐的方法
2、CDN：标签引入即可
3、手动下载，引入
这里我们着重说下前两个方法。
通常情况下我们什么都不处理的话，打出来的项目包应该是一个verndor.js一个main.css，这2个包包含了所有的js和css,这样导致的一个问题就是，如果我们引入的第三方库很多的情况，打出来的verndor.js包就会很大。那怎么处理呢？假如我们在页面安装了element-ui库和echarts库，这2个库都很大，我们希望把这2个库单独拎出来。
方法1、
index.html模板代码
<%= htmlWebpackPlugin.options.title %>
webpack.config.js配置
plugins:[
new VueLoaderPlugin(),
new HtmlwebpackPlugin({
title: "this is title", //用于生成的HTML文档的标题。
filename: "index.html", // 生成的模板文件的名字 默认index.html
template: "index.html", //模板来源文件
inject: 'body', //注入位置'head','body',true,false
favicon: "", //指定页面图标
minify: {
caseSensitive: false, ////是否大小写敏感
collapseBooleanAttributes: true, //是否简写boolean格式的属性如：disabled="disabled" 简写为disabled
collapseWhitespace: false //是否去除空格
},
hash: false, //是否生成hash添加在引入文件地址的末尾，类似于我们常用的时间戳，这个可以避免缓存带来的麻烦
cache: false, //是否需要缓存，如果填写true，则文件只有在改变时才会重新生成
showErrors: true, //是否将错误信息写在页面里，默认true，出现错误信息则会包裹在一个pre标签内添加到页面上
// chunks: ['main'], //引入的a,b模块，这里指定的是entry中设置多个js时，在这里指定引入的js，如果不设置则默认全部引入,数组形式传入
chunksSortMode: "auto", //引入模块的排序方式
// excludeChunks: ['a', 'b'], //排除的模块,引入的除a,b模块以外的模块，与chunks相反
xhtml: false //生成的模板文档中标签是否自动关闭，针对xhtml的语法，会要求标签都关闭，默认false
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename:'static/css/[name].[chunkhash:8].css'
})
],
optimization: {
minimizer: [
//压缩js
new UglifyJsPlugin({
test: /\.js(\?.*)?$/i,
}),
//压缩css
new OptimizeCssAssetsPlugin({})
],
splitChunks: {
chunks: 'all',
cacheGroups: {
libs: {
name: 'verndor',
test: /[\\/]node_modules[\\/]/,
priority: 10,
},
elementUI: {
name: 'chunk-elementUI', // 单独将 elementUI 拆包
priority: 20, // 权重要大于 commonsUi
test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
},
echarts: {
name: 'chunk-echarts', // 单独将 elementUI 拆包
priority: 30, // 权重要大于
test: /[\\/]node_modules[\\/]_?echarts(.*)/,
},
commonsUi: {
name: 'chunk-commons',
test: path.join(__dirname,'src/page'), // can customize your rules
minChunks: 2,//Math.ceil(pages.length / 3), 当你有多个页面时，获取pages.length，至少被1/3页面的引入才打入common包
}
}
},
runtimeChunk: {
name: entrypoint => `runtime~${entrypoint.name}`
}
}
这样打出来的包结构如下
打包后.png
index.html的结构
index.png
可以看到我们把element-ui和echats单独打包出来了，这样的好处就是，element-ui和echats通常不变，就可以充分利用项目的缓存。
方法2、
我们直接在index.html里先引入需要拆分的第三方库的cdn地址。配置webpack的externals属性打包忽略插件
模板index.html代码
this is title
//这里之所以把vue也改成cdn是因为element-ui是依赖vue的，所以也必须cdny引入
webpack.config.js配置
externals: {
'vue': 'Vue',
'element-ui': 'element-ui',
'echarts': 'echarts',
},
plugins:[
new VueLoaderPlugin(),
new HtmlwebpackPlugin({
title: "this is title", //用于生成的HTML文档的标题。
filename: "index.html", // 生成的模板文件的名字 默认index.html
template: "index.html", //模板来源文件
inject: 'body', //注入位置'head','body',true,false
favicon: "", //指定页面图标
minify: {
caseSensitive: false, ////是否大小写敏感
collapseBooleanAttributes: true, //是否简写boolean格式的属性如：disabled="disabled" 简写为disabled
collapseWhitespace: false //是否去除空格
},
hash: false, //是否生成hash添加在引入文件地址的末尾，类似于我们常用的时间戳，这个可以避免缓存带来的麻烦
cache: false, //是否需要缓存，如果填写true，则文件只有在改变时才会重新生成
showErrors: true, //是否将错误信息写在页面里，默认true，出现错误信息则会包裹在一个pre标签内添加到页面上
// chunks: ['main'], //引入的a,b模块，这里指定的是entry中设置多个js时，在这里指定引入的js，如果不设置则默认全部引入,数组形式传入
chunksSortMode: "auto", //引入模块的排序方式
// excludeChunks: ['a', 'b'], //排除的模块,引入的除a,b模块以外的模块，与chunks相反
xhtml: false //生成的模板文档中标签是否自动关闭，针对xhtml的语法，会要求标签都关闭，默认false
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin({
filename:'static/css/[name].[chunkhash:8].css'
})
],
optimization: {
minimizer: [
//压缩js
new UglifyJsPlugin({
test: /\.js(\?.*)?$/i,
}),
//压缩css
new OptimizeCssAssetsPlugin({})
],
}
打包后效果
效果.png
其中打包后的index.html代码如下
this is title
//这个是打包的，其余3个是我们cdn引入的