如何配置Webpack实现不同路径文件的编译输出？

需求对应修改方案 #

要实现你指定的文件输出路径，需要调整Webpack的output配置、样式处理规则，并引入MiniCssExtractPlugin来提取独立CSS文件，以下是具体修改：

1. 安装必要依赖 #

首先需要安装提取CSS的插件：

npm install mini-css-extract-plugin --save-dev

2. 完整配置代码 #

修改后的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/index.ts'),
    mode: "development",
    output: {
        path: path.resolve(__dirname, './public/'),
        filename: 'success/script/index.js',
        clean: true // 编译前清空public目录，避免旧文件残留
    },
    devServer: {
        static:{
            directory: path.join(__dirname, './public')
        },
        port: 3000,
        open: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: ["ts-loader"],
                exclude: /node_modules/,
            },
            {
                test: /\.scss$/,
                use:[
                    MiniCssExtractPlugin.loader, // 替换style-loader，提取独立CSS文件
                    "css-loader",
                    "sass-loader" // 顺序：先编译SCSS为CSS，再处理CSS，最后提取
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
            filename: 'index.html', // 基于output.path，直接输出到public根目录
            inject: "body"
        }),
        new MiniCssExtractPlugin({
            filename: 'success/style/style.css' // 指定CSS输出路径
        })
    ],
    resolve: {
        extensions: ['.ts', '.js'] // 让Webpack能识别TS文件扩展名
    }
};

关键修改说明 #

• TypeScript输出：通过output.filename直接指定路径success/script/index.js，结合output.path的./public/，最终输出到./public/success/script/index.js
• SCSS处理：用MiniCssExtractPlugin替代style-loader，将样式从JS中提取为独立的CSS文件，并通过插件配置指定输出路径
• HTML输出：简化HtmlWebpackPlugin的filename配置，利用output.path自动拼接路径，确保输出到./public/index.html
• output.clean：开启后自动清空输出目录，避免旧编译文件干扰
• resolve.extensions：添加.ts扩展名，确保Webpack能正确解析TS模块

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