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

by Microanswer

标签: vue 前端 javascript node webpack 脚手架 打包 编译


创建时间:Jun 14, 2019 2:37:35 PM | 最后更新:Oct 14, 2019 11:26:55 AM 


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

在经过了上一篇文章的讨论,本篇文章将继续讨论如何继续配置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、配置优化

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

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

这些问题如果不优化好,直接导致的就是用户感觉应用加载慢,而且浪费用户大量的流量数据。作为前端开发,最应该避免的就是这件事情的发生。为了解决这些问题,还应该对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


全文完, 转载请注明出处。 对你有帮助?不如赞一个吧:
发表评论(发表评论需要登录,你现在还没有登录。)

评论列表 (0条)

导航加载中…