【Microanswer】-【Vue,Webpack】自己动手搭建Vue项目脚手架2-打包

重要声明：本文章仅仅代表了作者个人对此观点的理解和表述。读者请查阅时持自己的意见进行讨论。

在经过了上一篇文章的讨论，本篇文章将继续讨论如何继续配置webpack使我们的前端项目能够打包编译为便于发布的HTML+CSS+JS文件。

如果你还没有阅读过上一篇讨论文章，点击立即阅读：《【Vue,Webpack】自己动手搭建Vue项目脚手架2-打包》。Vue 项目脚手架的搭建，不同 webpack 版本搭建方式不同，按照本文的搭建方式，会自动使用最新的 webpack 4 版本进行搭建。

1、知识回顾

上一篇中，实现了Vue单文件的渲染，并且在本地搭建服务，在浏览器测试看到了效果。现在，再次打开项目vuedemo, 运行：

C:\...\vuedemo>npm run dev

即可在浏览器打开http://127.0.0.1:3011 看到最终效果。效果最终是要发布到正式环境，然后给客户看到，不可能永远都停留在开发测试上看到的效果。所以，为了实现这样的需求，必须让webpack能够导出让浏览器能够认可的文件。

2、准备打包

在进行本地测试服务的搭建时，在 config 目录下建立了 devServer.js 文件进行测试服务的搭建和配置。同样的，针对打包编译，也建立另一个专门针对导出功能的独立文件。在 config 目录下建立文件 build.js 文件，以后将使用此文件进行打包编译的工作。文件中内容如下：

// 引入 webpack 打包模块
let webpack = require("webpack");
// 引入 webpack 配置对象
let webpackConfig = require("./webpack_config");

// 打包的目的就是要用于发布，所以，打包时要指定环境为生产环境：
webpackConfig.mode="production";

// 使用打包模块进行打包
console.log("webpack 打包开始...");
webpack(webpackConfig, function (err, stats) {
    if (err) {
        console.log(err);
        return;
    }
    console.log(stats.toString());
    console.log("webpack 打包完成。");
});

现在你可以打包你的源代码，成为最终的可用于发布正式环境的代码。建立好上面的文件后，运行这个文件：

C:\...\vuedemo>node config\build

执行命令，等待输出：webpack 打包完成。 会发现 vuedemo 目录下新增了一个 dist 目录，此目录下就是build完成后的结果，要发布这些内容，复制这些文件到你的web服务器资源目录里面，就可以访问了。

同样的道理，这个命令可以集合到 package.json 中，方法和上一篇讨论中新增 dev 功能时的方法相同。在 package.json 文件的 scripts 节点下新增一条：

{
    ...,
    "scripts": {
        ...,
        "build": "node config/build",
        ...
    },
    ...,
}

以后再进行发布打包时，就只需要执行 npm run build 即可进行打包。

3、配置优化

对于不大的项目，可能默认的配置已经能够满足你的需求。但是如果项目足够庞大，页面数量较多，可能默认配置打包的结果不会让你满意。就当前的配置来说，存在着许多的问题：

所有的代码都会被打包到一个js文件里。
重复多次使用的代码不会被提取成公共代码，导致打包内容臃肿。
文件结构不清晰。

这些问题如果不优化好，直接导致的就是用户感觉应用加载慢，而且浪费用户大量的流量数据。作为前端开发，最应该避免的就是这件事情的发生。为了解决这些问题，还应该对webpack进一步的优化配置。

(1)、打包分类

这个工作的目的，是为了让代码做到：第三方依赖模块打包到一个文件里、源代码打包到一个文件里、然后webpack运行时包又打包到另一个文件里。对于强迫症患者来说，这一点是必须要做到的。为了完成这一点，需要加入更多的一些配置，对于webpack 4版本，只需加入 optimization 配置项，即可完成对各个模块的分割：

修改 build.js 文件，加入 optimization 相关配置：

// 引入 webpack 打包模块
let webpack = require("webpack");
// 引入 webpack 配置对象
let webpackConfig = require("./webpack_config");
// 引入文件模块
let fs = require("fs");
// 引入路径处理模块
let path = require("path");

// 删除目录方法
let deleteFolder = function (path) {
    let files = [];
    if (fs.existsSync(path)) {
        files = fs.readdirSync(path);
        files.forEach((file, index) => {
            let curPath = path + "/" + file;
            if (fs.statSync(curPath).isDirectory()) {
                deleteFolder(curPath);
            } else {
                fs.unlinkSync(curPath);
            }
        });
        fs.rmdirSync(path);
    }
};

// 打包的目的就是要用于发布，所以，打包时要指定环境为生产环境：
webpackConfig.mode="production";

// 实现将各种功能的文件导出到不同的js里。
webpackConfig.optimization = {

    // 将webpack运行时文件导出到指定文件里。
    runtimeChunk: {
        name: "webpack_runtime"
    },

    // 将其他要分割的模块进行分割定义
    splitChunks: {
        chunks: 'all',

        // 定义打包输出模块名和文件名的间隔符号。由于文件名定义的是[name].js，没有实际的文件名，所以在实际打包结果里，不会出现间隔符，而是只有模块名
        automaticNameDelimiter: "_",
        cacheGroups: {

            // 将第三方依赖打包入一个third文件中
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                name: "third",
                minChunks: 1
            },

            // 将引用了2次及以上的模块提取为公共commons模块。
            commons: {
                name: "commons",
                minChunks: 2
            }
        }
    }
};


// 打包前，先删除以前打包的内容。
let distDir = path.join(__dirname, "../dist");
if (fs.existsSync(distDir)){
    console.log("删除旧打包数据...");
    deleteFolder(distDir);
}
// 使用打包模块进行打包
console.log("webpack 打包开始...");
webpack(webpackConfig, function (err, stats) {
    if (err || stats.hasErrors()) {
        console.error(err || stats.toString());
        console.log("webpack 打包出错。");
        return;
    }
    console.log(stats.toString());
    console.log("webpack 打包完成。");
});

这样配置过后，再一次进行打包，会发现，各个文件分开打包，公共模块提取出来了，基本达成了咱们的目的！

4、总结

Vue 项目脚手架的搭建，不同 webpack 版本搭建方式不同，按照本文的搭建方式，会自动使用最新的 webpack 4 版本进行搭建。老版本webpack的搭建方法有大部分地方存在差异。请以 Vue 官方文档为标准。

搭建脚手架的根本实现，取决于对 webpack 的理解和熟悉程度，所以主要的是要先了解webpack的用法，要了解webpack的更多详细用法，请参考webpack文档：webpack中文网。

5、附件

本文涉及的示列代码程序，可以在此地址下载：百度网盘, 提取码：duuv。

【Vue,Webpack】自己动手搭建Vue项目脚手架2-打包