Webpack学习系列(十三)/优化vue项目构建速度/webpackchain(持续更新)总结篇主要是梳理了一下web

总结篇主要是梳理了一下webpack整体的打包流程，对webpack有了更深的了解。在平常开发中，更多的是对webpack配置进行优化，以提高打包效率。

公司的项目用的vue，因此对vue-cli4创建项目后的默认webpack进行一些优化。在vue-cli文档中推荐webpack-chain对vue进行配置。如果看过vue-cli的源码会发现，vue-cli在创建webpack配置的时候的确都是用webpack-chain的，没有写过config文件。因此只能通过vue inspect指定来窥见webpack的options，不能输出最终的options。

惯例在根目录创建vue.config.js，在代码块内就可以利用chainWebpack对webpack的options进行配置了

module.exports = { 
    chainWebpack: config => {
        //...略
    }
}

优化一：别名

在开发中，我们可能会有自己写的公共库/公共组件，因此在引入的时候需写引入文件的路径，如果文件夹层级相差太多，就会导致出现很多的../影响体验。因此可以使用webpack的alias属性进行优化。

module.exports = {    chainWebpack: config => {        config.resolve.alias            .set("@", resolve("src"))            .set("assets", resolve("src/assets"))            .set("components", resolve("src/components"))            .set("public", resolve("public"))            .set("common", resolve("src/common"))            .set("network", resolve("src/network"))            .set("views", resolve("src/views"))            .set("router", resolve("src/router"))            .set("store", resolve("src/store"))            .set("mock", resolve("src/mock"))            .set("tests", resolve("tests"))    }}

优化二：html-webpack-externals-plugin

vue项目除了vue.js框架之外，最常用的就是element-ui，对于此类常用库，我们有两种方法：1. splitChunks；2. html-webpack-externals-plugin使webpack不打包此类库，再从外部cdn引入。

第一种方法虽然可以提取出基础库，但是每次打包的时候还是会进行打包，影响构建速度，因此采用第二种方法既可以提取基础库，又可以加快打包速度。此外，对于这种不会经常变更的基础库，用户的浏览器在第一次加载后就会缓存基础库文件。在第二次加载的时候不会重复加载，只要读取浏览器缓存即可。这也利用缓存加快了网页速度。一举三得。

下图是课程中webpack.prod.js的html-webpack-externals-plugin插件配置

下方是vue项目中利用webpack-chain使用html-webpack-externals-plugin范例。

注：下方代码中调用了两次end()函数，每次调用end()就返回上级属性。如：第一次调用end方法回到resolve属性，再次调用end方法回到config属性。再在config层级调用plugin方法。user方法有两个参数：第一个是html-webpack-externals-plugin插件；第二个是插件的参数。注意这里参数要用[]包裹，否则会报错：TypeError: Found non-callable @@iterator。

module.exports = {    chainWebpack: config => {        config.resolve.alias            .set("@", resolve("src"))            .set("assets", resolve("src/assets"))            .set("components", resolve("src/components"))            .set("public", resolve("public"))            .set("common", resolve("src/common"))            .set("network", resolve("src/network"))            .set("views", resolve("src/views"))            .set("router", resolve("src/router"))            .set("store", resolve("src/store"))            .set("mock", resolve("src/mock"))            .set("tests", resolve("tests"))            .end()            .end()            .plugin('HtmlWebpackExternalsPlugin')            .use(require('html-webpack-externals-plugin'),                [{                    externals:[{                        module: 'vue',                        entry: 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js',                        global: 'Vue'                    },{                        module: 'element-ui',                        entry:'https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.13.2/index.js',                    }]                }])    }}