Webpack构建：如何将主题JS文件重命名为bundle.js且不影响其他文件

嘿，我来帮你搞定这个问题！要把主题对应的JS文件改成bundle.js，同时保留vendor.js和主题名命名的CSS文件，只需要调整Webpack配置里的entry结构和CSS插件的文件名规则就行，具体步骤如下：

1. 修改webpack.config.js中的Entry配置 #

原来的代码会把主题名作为entry的key，导致生成的JS文件跟着主题名走。我们把主题入口的key固定成bundle，这样Webpack就会输出bundle.js：

原代码片段： #

let entry = {
    vendor: [
        'lodash'
    ]
}

let themeName = '';
let themes = THEMES.map((theme) => {
    console.log('theme: ', theme);
    themeName = theme;
    return path.join(dirApp, theme);
});
console.log(themes)
entry[themeName] = themes

修改后的代码： #

let entry = {
    vendor: [
        'lodash'
    ]
}

// 保持原有逻辑：取THEMES数组的最后一项作为当前构建的主题
const mainTheme = THEMES[THEMES.length - 1];
// 将主题入口的key固定为'bundle'，确保生成的JS文件名为bundle.js
entry.bundle = path.join(dirApp, mainTheme);

2. 调整ExtractTextWebpackPlugin的文件名规则 #

原来的CSS文件名依赖entry的key，现在我们直接用主题名来命名CSS文件，这样即使entry的key是bundle，CSS文件依然会以red.css/blue.css的形式输出：

原代码片段： #

new ExtractTextWebpackPlugin({
    filename: "[name].css",
    disable: false,
    allChunks: true
})

修改后的代码： #

new ExtractTextWebpackPlugin({
    // 直接使用主题名作为CSS文件名
    filename: `${mainTheme}.css`,
    disable: false,
    allChunks: true
})

3. 验证构建结果 #

执行原来的构建脚本（比如npm run build-wacoal）后，dist目录下会生成：

• vendor.js（保持原有命名不变）
• bundle.js（主题JS文件已重命名）
• red.css/blue.css（主题CSS文件依然保留原命名）

这样就完全符合你的需求啦！

内容的提问来源于stack exchange，提问作者Neil