一个开发后期考虑的优化问题

一、问题描述

webpack项目打包默认名称是dist,每次打包之后都会将上一次打包的文件覆盖。
每次打完包想通过名称知道这个包的版本日期，且想保存下每日版本的包，怎么搞？

二、解决思路

1.打包文件覆盖问题

仔细看下以下配置代码你就明白了

// package.json
"scripts": {
    "clean": "rimraf dist",
    "build": "rimraf dist && webpack -p --progress --hide-modules"
}

以上代码为package.json文件中配置命令部分的默认代码。clean命令是删除项目中的dist文件夹，而build命令是先删除dist文件夹再生成打包文件。要想彻底解决这个问题，建议修改打包后文件名。

rimraf dist这句代码会删除dist文件夹及下面所有内容，即使dist文件夹不存在也不会报错

2.修改打包后文件名

配置修改打包文件名之前首先要确定你当前使用的项目是什么架构，是否对webpack.config.js进行了拆分。

区分是否拆分很简单，一般的文件拆分都是将webpack配置拆分为dev、dev与prod三种环境，分别进行配置。

(1). 未拆分配置

直接修改webpack.config.js文件中的output.path

const today = new Date()
const packageName = `<你的项目名称>(${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()})`

output: {
    path: resolve(__dirname, packageName)
}

配置之后，此时打包后的文件名就变成了项目名+打包日期。

(2). 拆分配置
首先拆分时将webpack配置拆分为dev、dev与prod三种环境，分别进行配置。我们不需要每个环境都去配置一遍，因为这种架构模式会把所有的配置文件放置在根目录下的config文件夹中做统一配置。

// 根目录下 config/index.js

const today = new Date()
const packageName = `<你的项目名称>(${today.getFullYear()}-${today.getMonth() + 1}-${today.getDate()})`

module.exports = {
    dev: {
        ...
    },
    build: {
        // 打包后入口文件路径
        index: path.resolve(__dirname, `../${packageName}/index.html`),
        // 打包后资源文件位置
        path: path.resolve(__dirname, `../${packageName}`),
    }
}

3.打包命令优化

前边已经介绍过rimraf dist命令意思是删除dist文件夹。在上边的操作中打包后文件的文件名已经变成动态的，所以package.json中可以作如下修改。

修改前

// package.json
"scripts": {
    "clean": "rimraf dist",
    "build": "rimraf dist && webpack -p --progress --hide-modules"
}

修改后

// package.json
"scripts": {
    "build": "webpack -p --progress --hide-modules"
}

clean命令在这里已经无效了，所以可以直接删了
build命令可以直接进行打包，并保留打包当天最新一次的打包结果。

END

StevenDIY

发布了146 篇原创文章 · 获赞 53 · 访问量 25万+

私信关注

webpack打包名称优化