umi如何生成下面的目录结构?

Question

umi如何生成下面的目录结构

• dist
• • index.html
• • public
• • • xxx.js/xxx.css/xxx.png

也就是除index.html之外的资源文件都打进一个public文件夹里。

Answer 1

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
    entry: path.resolve(__dirname, './src'),
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'public/js/[name].js',
        assetModuleFilename: 'public/assets/[name].[hash:5][ext]'
    },
    module: {
        rules: [
            {
                test: /\.(png|jpe?g|gif)/,
                type: 'asset',
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                ],
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'index.html'),
        }),
        new MiniCssExtractPlugin({
            filename: "public/style/[name].css",
        }),
    ]
}

package.json

{
  "name": "webpack5",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "NODE_ENV=production webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  }
}

tree

.
├── dist
│   ├── index.html
│   └── public
│       ├── assets
│       │   └── cat.b5a21.jpeg
│       ├── js
│       │   └── main.js
│       └── style
│           └── main.css
├── index.html
├── node_modules
│   ├── @types
│   │   ├── eslint -> ../.pnpm/@types+eslint@8.4.1/node_modules/@types/eslint
│   │   ├── eslint-scope -> ../.pnpm/@types+eslint-scope@3.7.3/node_modules/@types/eslint-scope
│   │   ├── estree -> ../.pnpm/@types+estree@0.0.51/node_modules/@types/estree
│   │   ├── html-minifier-terser -> ../.pnpm/@types+html-minifier-terser@6.1.0/node_modules/@types/html-minifier-terser
│   │   ├── json-schema -> ../.pnpm/@types+json-schema@7.0.9/node_modules/@types/json-schema
│   │   └── node -> ../.pnpm/@types+node@17.0.21/node_modules/@types/node
│   ├── css-loader -> .pnpm/css-loader@6.7.1_webpack@5.70.0/node_modules/css-loader
│   ├── eslint-scope -> .pnpm/eslint-scope@5.1.1/node_modules/eslint-scope
│   ├── html-webpack-plugin -> .pnpm/html-webpack-plugin@5.5.0_webpack@5.70.0/node_modules/html-webpack-plugin
│   ├── mime-types -> .pnpm/mime-types@2.1.34/node_modules/mime-types
│   ├── mini-css-extract-plugin -> .pnpm/mini-css-extract-plugin@2.6.0_webpack@5.70.0/node_modules/mini-css-extract-plugin
│   ├── sass -> .pnpm/sass@1.49.9/node_modules/sass
│   ├── sass-loader -> .pnpm/sass-loader@12.6.0_sass@1.49.9+webpack@5.70.0/node_modules/sass-loader
│   ├── webpack -> .pnpm/webpack@5.70.0_webpack-cli@4.9.2/node_modules/webpack
│   └── webpack-cli -> .pnpm/webpack-cli@4.9.2_webpack@5.70.0/node_modules/webpack-cli
├── package.json
├── pnpm-lock.yaml
├── src
│   ├── cat.jpeg
│   ├── index.js
│   ├── index.scss
│   └── test.js
└── webpack.config.js