怎么自定义打包输出目录？ #9887

DAOLIDEWONIU · 2022-11-29T02:21:49Z

DAOLIDEWONIU
Nov 29, 2022

config.ts 配置如下

export default defineConfig({
  hash: true,
  deadCode: {},
  mfsu: {
    shared: {
      react: {
        singleton: true,
      },
    },
    strategy: 'eager',
  },
  externals: {
    react: 'window.React',
    'react-dom': 'window.ReactDOM',
  },

  jsMinifier: 'esbuild',
  jsMinifierOptions: {
    minifyWhitespace: true,
    minifyIdentifiers: true,
    minifySyntax: true,
    drop: ['console'],
  },
  cssMinifier: 'esbuild',
  cssMinifierOptions: {
    minifyWhitespace: true,
    minifySyntax: true,
  },
  headScripts: [
    'https://gw.alipayobjects.com/os/lib/react/17.0.2/umd/react.production.min.js',
    'https://gw.alipayobjects.com/os/lib/react-dom/17.0.2/umd/react-dom.production.min.js',
  ],
  chainWebpack(config) {
    // 修改js输出目录
    config.output
      .filename(`js/[name].[contenthash:8].js`)
      .chunkFilename(`js/[name].[contenthash:8].async.js`);

    // 修改css输出目录
    config.plugin('mini-css-extract-plugin').tap((args) => [
      {
        ...args[0],
        filename: `css/[name].[contenthash:8].css`,
        chunkFilename: `css/[name].[contenthash:8].chunk.css`,
      },
    ]);

    // 修改图片输出目录
    const IMG_REG = /\.(png|jpe?g|gif|webp|ico|svg)(\?.*)?$/;
    config.module.rule('asset').exclude.add(IMG_REG).end();
    config.module.rule('images').test(IMG_REG).type('asset/inline').end();

    console.log('更改后的配置', config.toString());
  },
});

我想打包出来，js 放在js文件夹下，css 放在css文件夹下，但是打包出来的html 代码中没有引入 umijs 包，所以就不能正确显示，请问应该怎么处理？

这是打包出来的html

<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="web_version" content="1669688070347">
<link rel="shortcut icon" href="/favicon.ico">
<script src="https://gw.alipayobjects.com/os/lib/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://gw.alipayobjects.com/os/lib/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
</head>
<body>
<div id="root-master"></div>

</body></html>

fz6m · 2022-11-29T11:18:05Z

fz6m
Nov 29, 2022
Maintainer

改一下这个配置就行了：outputPath

0 replies

DAOLIDEWONIU · 2022-11-29T14:38:13Z

DAOLIDEWONIU
Nov 29, 2022
Author

好像不对
比如
outputPath: "www"

改变的只是最外层的打包文件名？

而内部的index.html 中还是没有配置

2 replies

This comment has been hidden.

Sign in to view

DAOLIDEWONIU Nov 30, 2022
Author

好的，谢谢

JinO16 · 2023-06-08T08:21:27Z

JinO16
Jun 8, 2023

请问这个问题现在支持了吗？想要umi在打包的时候生成的产物规范化，同样遇到了此问题，辛苦有时间回复下

0 replies

fz6m · 2023-06-08T15:06:05Z

fz6m
Jun 8, 2023
Maintainer

umi 4 不会支持自定义产物内部目录结构，目前存在的各种自定义 hack 解法来修改输出目录，不保证 100% 没有问题，为保证不会发生线上事故，请不要继续使用 hack 修改产物的方法了，可以只把产物 index.html 保留下来通过 nginx 提供，其他的 js 、css 都发到 cdn 上按目录管理，然后通过 publicPath 来引入。

1 reply

JinO16 Jun 9, 2023

好的，谢谢

leshalv · 2023-08-30T03:09:26Z

leshalv
Aug 30, 2023

这个需求还是很有必要的，比如直接部署在springboot项目里，如果能分层，很好用。

1 reply

JasonDRZ Nov 21, 2023

自定义产物输出目录的需求场景很多时候比较刚需。如配置静态CDN缓存，一个目录路径规则就能搞定的事儿，现在要搞一个很长的配置规则，很不方便。。。。

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

怎么自定义打包输出目录？ #9887

{{title}}

Replies: 5 comments 4 replies

{{title}}

{{title}}

This comment has been hidden.

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

怎么自定义打包输出目录 ？ #9887

DAOLIDEWONIU Nov 29, 2022

Replies: 5 comments · 4 replies

fz6m Nov 29, 2022 Maintainer

DAOLIDEWONIU Nov 29, 2022 Author

This comment has been hidden.

DAOLIDEWONIU Nov 30, 2022 Author

JinO16 Jun 8, 2023

fz6m Jun 8, 2023 Maintainer

JinO16 Jun 9, 2023

leshalv Aug 30, 2023

JasonDRZ Nov 21, 2023

怎么自定义打包输出目录？ #9887

DAOLIDEWONIU
Nov 29, 2022

Replies: 5 comments 4 replies

fz6m
Nov 29, 2022
Maintainer

DAOLIDEWONIU
Nov 29, 2022
Author

DAOLIDEWONIU Nov 30, 2022
Author

JinO16
Jun 8, 2023

fz6m
Jun 8, 2023
Maintainer

leshalv
Aug 30, 2023