webpack 没有获得与输出 `build` 文件夹相同的名称，而是获得数字值

Question

我正在尝试为我的 javascript 和 css 文件配置 webpack 使用相同名称的构建到 build 文件夹中。但无法得到它。有人帮我解决这个问题吗？

这是我的配置：

const HtmlPlugin = require("html-webpack-plugin");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');


module.exports = {
    watch: true,
    output:{
        path:path.resolve(__dirname, "build"),
        filename: '[name].bundle.js', //but not getting
        publicPath: ''
    },
    resolve:{
        extensions:[".ts",".tsx",".js",".jsx"]
    },
    module:{
        rules:[
            {
                test:/\.(js|jsx|ts|tsx)$/,
                exclude:/node_modules/,
                use:[{loader:"babel-loader"}]
            },
            {
                test:/\.html$/,
                use:[{loader:"html-loader"}]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/i,
                use: [ {loader: "file-loader",  options: {
                    name: '[path][name].[ext]'
                }}]
            },
            {
                test:/\.s[ac]ss$/i,
                use:[MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new HtmlPlugin({
            filename:"index.html",
            template:"./src/index.html"
        }),
        new MiniCssExtractPlugin(),
        new webpack.DefinePlugin({
            "process.env":{
                "NODE_ENV":JSON.stringify(process.env.NODE_ENV)
            }
        })
    ],
    devtool: 'inline-source-map',
    devServer:{
        historyApiFallback:true,
        port:5000
    }
}

"webpack": "^5.11.0", "webpack-cli": "^4.2.0", - 我现在的版本

目前我得到的文件名如下：

Answer 1

您在 output 部分缺少 chunkFileName，请像这样尝试

output: {
     
      filename: isProduction ? "static/js/[name].[contenthash:8].js" : "static/js/bundle.js",

      futureEmitAssets: true,

      chunkFilename: isProduction
        ? "static/js/[name].[contenthash:8].chunk.js"
        : "static/js/[name].chunk.js",

      publicPath: "/",

      devtoolModuleFilenameTemplate: isProduction
        ? (info) => path.relative("./src/index.js", info.absoluteResourcePath).replace(/\/g, "/")
        : ((info) => path.resolve(info.absoluteResourcePath).replace(/\/g, "/")),

      jsonpFunction: "name-of-yow-app",

      globalObject: "this",
    },

Answer 2

你是代码拆分吗？因为如果你是，那么你必须这样做

import("./templates/foo" /* webpackChunkName: "chunk-foo" */ ).then(function(foo) {
    console.log('foo:', foo);
})

https://github.com/webpack/webpack/tree/master/examples/code-splitting-specify-chunk-name

或者如果你能说出你是如何创建块的？，这将有助于理解

webpack 没有获得与输出 `build` 文件夹相同的名称，而是获得数字值

webpack not getting the same names with output `build` folder, getting number values instead

webpack

webpack-5