Webpack 4 的变化

Question

我目前正在使用来自 reactcreateapp 的 webpack 4.32，我想重命名输出文件的格式。当前它在其文件名中使用波浪号 (~) 作为分隔符，如命中 runtime~main.167ad0b7.js.map。我想用破折号代替波浪号。我该如何更改？

我试着用谷歌搜索它，它说我需要调整

automaticNameDelimiter: '~'

但不幸的是，我认为在 Webpack 4 中它们改变了您配置事物的方式。当我搜索它时可以看到它，但我尝试在破折号中对其进行硬编码，但它不起作用，属性旁边的问号是什么？ TIA

 interface SplitChunksOptions {
        /** Select chunks for determining shared modules (defaults to \"async\", \"initial\" and \"all\" requires adding these chunks to the HTML) */
        chunks?: "initial" | "async" | "all" | ((chunk: compilation.Chunk) => boolean);
        /** Minimal size for the created chunk */
        minSize?: number;
        /** Maximum size for the created chunk */
        maxSize?: number;
        /** Minimum number of times a module has to be duplicated until it's considered for splitting */
        minChunks?: number;
        /** Maximum number of requests which are accepted for on-demand loading */
        maxAsyncRequests?: number;
        /** Maximum number of initial chunks which are accepted for an entry point */
        maxInitialRequests?: number;
        /** Give chunks created a name (chunks with equal name are merged) */
        name?: boolean | string | ((...args: any[]) => any);
        /** Assign modules to a cache group (modules from different cache groups are tried to keep in separate chunks) */
        cacheGroups?: false | string | ((...args: any[]) => any) | RegExp | { [key: string]: CacheGroupsOptions | false };
        /** Override the default name separator (~) when generating names automatically (name: true)  */
        automaticNameDelimiter?: string;
    }

Answer 1

弹出后，config/webpack.config.js

- new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
+ new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime-.+[.]js/]),

- runtimeChunk: true
+ runtimeChunk: {
+   name: entrypoint => `runtime-${entrypoint.name}`
+ }

并查看 split-chunks-plugin 插件的 docs

// after ejecting, config/webpack.config.js:246
splitChunks: {
  chunks: 'all',
  name: true, // <--
  automaticNameDelimiter: '---boom---', // <--
},

这会生成类似

的内容

build/static/js/vendors---boom---main.b41502e9.chunk.js
build/static/js/vendors---boom---main.b41502e9.chunk.js.map

您还可以向 webpack 配置的 output.filename 添加函数而不是字符串：

// after ejecting, config/webpack.config.js:246
filename: isEnvProduction
  ? ({ chunk, ...rest }) => {
    // just for debug
    console.log(JSON.stringify(({chunk, rest}))); 
    return `static/js/${chunk.name.replace('~', '-')}.[contenthash:8].js` 
  }
  : isEnvDevelopment && 'static/js/bundle.js',

我想你明白了，我添加了一些 console.log 用于调试。

Webpack 4 的变化

Webpack 4 changes

reactjs

webpack-4