【webpack】如何修改打包后的文件名称及输出目录

小咪咪 2023-09-27 18:48 74阅读 0赞

#### 场景举例 ####

> 比如：我想将下图中的src目录下的500.jsx文件打包后输出到dist目录下500文件夹下名为50x.html.
> 
> 下面将以注册插件的方式来完成此功能。

![9d0c30c5fd9e4ceba85ceb6046c72bb1.png][]

--------------------

#### 第一步：修改webpack配置 ####

> 修改的位置是：config.js
> 
> 我们先注册一个插件MyPlugin，具体的方法如下代码所示：

const MyPlugin = require("./MyPlugin"); //导入插件
    
    export default {
    
        chainWebpack: (config) => {
            config.plugin("MyPlugin").use(MyPlugin); //注册并使用插件
        },
    };

--------------------

#### 第二步，插件的具体代码逻辑 ####

> 我的思路是：
> 
> 首先监听webpack打包后的时机，而这个钩子函数是done.正常打包时将500.jsx文件打包到dist下的500文件夹下名称为index.html。于是，我先使用copySync方法复制一份index.html，复制后的文件叫50x.html，此时目录下有两个文件，我们再使用unlink删除index.html就完事了。
> 
> ps:我使用了setTimeout异步是因为copySync是异步的。

#### 自己注册的插件具体的代码如下： ####

const isProduction = process.env.NODE_ENV === "production"; // 判断是否是生产环境
    
    class MyPlugin {
        apply(compiler) {
            // 在 webpack 构建过程中，执行一些操作
            compiler.hooks.done.tap("MyPlugin", () => {
                console.log("MyPlugin is done.");
                if (isProduction) { //如果是生产环境
                    const fs = require("fs-extra");//导入node.js的api
                    const fs2 = require("fs"); //导入node.js的api
                    setTimeout(() => {
                        //copySync(起始文件路径，目标目录路径)功能：复制文件
                        fs.copySync("./dist/500/index.html", "./dist/500/50x.html");
                        // fs.copySync("./src/pages/500.jsx", "./dist/500/50x.html");
                        //unlink('要删除的路径'，回调函数)；功能：删除文件
                        fs2.unlink("./dist/500/index.html", (err) => {
                            console.log("文件已成功删除");
                        });
                    }, 500);
                }
            });
        }
    }
    
    module.exports = MyPlugin;

####  ####

[9d0c30c5fd9e4ceba85ceb6046c72bb1.png]: https://img-blog.csdnimg.cn/9d0c30c5fd9e4ceba85ceb6046c72bb1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，74人围观）

还没有评论，来说两句吧...

相关阅读

相关【webpack】如何修改打包后的文件名称及输出目录

场景举例 > 比如：我想将下图中的src目录下的500.jsx文件打包后输出到dist目录下500文件夹下名为50x.html. > > 下面将以注册插件的方式来完成此

小咪咪/ 2023年09月27日 18:48/ 0 赞/ 75 阅读

相关 python批量修改文件名称及文件属性

最近super simple song很火，本人有sss的mp4视频文件和歌词本，为了让歌词本可以点读，需要自制毛毛虫点读的音频，但是sss的歌曲有180多首，所以想通过程序批

ゝ一纸荒年。/ 2023年01月01日 11:56/ 0 赞/ 155 阅读

相关 Gradle修改打包后的APK名称

Gradle修改打包后的APK名称，之后使用`Build`\->`Generate Signed Bundle / APK...`菜单或者`assemble`指令打包之后的AP

爱被打了一巴掌/ 2022年12月17日 08:54/ 0 赞/ 136 阅读

相关 spring boot 修改打包后 jar 或者 war 的项目名称

配置下 pom.xml 文件 <build> <finalName>fhadmin</finalName> <plugins>

以你之姓@/ 2022年12月13日 04:36/ 0 赞/ 142 阅读

相关 springboot 修改打包后的项目 (jar 或者 war) 名称

配置下 pom.xml 文件 <build> <finalName>fhadmin</finalName> <plugins>

一时失言乱红尘/ 2022年12月06日 15:48/ 0 赞/ 215 阅读

相关 TOMCAT发布后的名称修改

第一种方法：打开工程所在目录，找到一个 .mymetadata的文件，用记事本等打开，内容大致如下： <?xml version="1.0" encoding=

系统管理员/ 2022年08月06日 15:29/ 0 赞/ 159 阅读

相关 java 修改文件名称/批量修改文件名称

修改单个文件 public static void main(String[] args) { String fileName = "work.doc"

今天药忘吃喽~/ 2022年06月02日 07:55/ 0 赞/ 247 阅读

相关使用webpack打包后的vue项目如何运行（express）

我们知道使用webpack打包vue项目后会生成一个dist文件夹，dist文件夹下有html文件和其他css、js以及图片等，那么打包后的文件该如何正确运行呢？　　倘若直

浅浅的花香味﹌/ 2022年05月17日 12:38/ 0 赞/ 226 阅读

相关 webpack打包文件过程

webpack打包 1)安装webpack $ npm install webpack webpack-cli --save-dev 2)添加配置文件 we

快来打我*/ 2022年05月08日 06:14/ 0 赞/ 281 阅读

相关 webpack_（第二章）_浅析webpack打包输出的内容

浅谈webpack打包知识点在上次完成webpack基本配置之后运行`npm run bundle` 打包可以看到在我们打包的时候，输出了非常多的提示命令，那

心已赠人/ 2022年01月09日 20:51/ 0 赞/ 327 阅读