引入第三方库通常有3种方法
1、npm 包管理： 目前最常用和最推荐的方法
2、CDN：<script></script>标签引入即可
3、手动下载，引入
这里我们着重说下前两个方法。
通常情况下我们什么都不处理的话，打出来的项目包应该是一个verndor.js一个main.css，这2个包包含了所有的js和css,这样导致的一个问题就是，如果我们引入的第三方库很多的情况，打出来的verndor.js包就会很大。那怎么处理呢？假如我们在页面安装了element-ui库和echarts库，这2个库都很大，我们希望把这2个库单独拎出来。
方法1、
index.html模板代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <div id="app"></div> </body> </html>
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代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>this is title</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> </head> <body> <div id="app"></div> <!-- 引入组件库 --> <script type="text/javascript" src="https://unpkg.com/vue"></script>//这里之所以把vue也改成cdn是因为element-ui是依赖vue的，所以也必须cdny引入 <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script> </body> </html>
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代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>this is title</title> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <link href="static/css/main.4157de89.css" rel="stylesheet"></head> <body> <div id="app"></div> <!-- 引入组件库 --> <script type="text/javascript" src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.min.js"></script> <script type="text/javascript" src="static/js/main.4dadea30.js"></script></body>//这个是打包的，其余3个是我们cdn引入的 </html>
