Webpack单独编译多SCSS与JS文件问题求助

需求与问题 #

需要通过Webpack实现：

• CSS：css/src/main.scss 输出到 css/dist/main.css，css/src/pages 下的SCSS文件输出到 css/dist/pages/[文件名].css
• JS文件编译正常，无需调整

当前遇到的问题：

• css/src/pages下的SCSS编译后输出文件包含JS代码
• main.scss编译路径错误，被放到css/dist/pages目录

目录结构 #

assets
   package.json
   webpack.config.js
   css
      dist
      src
         lib
         pages
         fonts.scss
         main.scss
   js
      dist
      lib
      src
         components
         pages
         App.js

解决方案 #

核心修复思路 #

1. 拆分JS和CSS的Webpack基础配置，避免规则互相干扰
2. 使用MiniCssExtractPlugin替代file-loader处理SCSS，确保生成纯CSS文件
3. 为每个CSS入口单独配置输出路径与插件规则，修正路径错误

修改后的完整配置 #

const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// JS通用配置（保留原JS编译逻辑）
const jsBaseConfig = {
    mode: "production",
    watch: true,
    module: {
        rules: [] // 可添加babel-loader等JS处理规则
    }
};

// CSS通用配置
const cssBaseConfig = {
    mode: "production",
    watch: true,
    module: {
        rules: [
            {
                test: /\.scss$/i,
                include: [
                    path.resolve(__dirname, 'css/src'),
                    path.resolve(__dirname, 'css/src/pages')
                ],
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            }
        ]
    },
    optimization: {
        minimize: true,
        minimizer: [new CssMinimizerPlugin()]
    }
};

// 组装所有配置项
const configs = [];

// 处理JS主入口
const jsMain = Object.assign({}, jsBaseConfig, {
    name: 'main-js',
    entry: './js/src/App.js',
    output: {
        filename: 'app.min.js',
        path: path.resolve(__dirname, 'js/dist'),
    }
});
configs.push(jsMain);

// 处理JS pages入口
const jsPagesDir = path.resolve(__dirname, 'js/src/pages');
fs.readdirSync(jsPagesDir).forEach(fileName => {
    const jsPageConfig = Object.assign({}, jsBaseConfig, {
        name: `js-page-${fileName.replace('.js', '')}`,
        entry: path.resolve(jsPagesDir, fileName),
        output: {
            filename: fileName,
            path: path.resolve(__dirname, 'js/dist/pages'),
        }
    });
    configs.push(jsPageConfig);
});

// 处理CSS主入口（main.scss）
const cssMain = Object.assign({}, cssBaseConfig, {
    name: 'main-css',
    entry: './css/src/main.scss',
    output: {
        filename: '[name].js', // 仅为Webpack内部标识，实际输出由插件控制
        path: path.resolve(__dirname, 'css/dist'),
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'main.css'
        })
    ]
});
configs.push(cssMain);

// 处理CSS pages入口
const cssPagesDir = path.resolve(__dirname, 'css/src/pages');
fs.readdirSync(cssPagesDir).forEach(fileName => {
    const pageName = fileName.replace('.scss', '');
    const cssPageConfig = Object.assign({}, cssBaseConfig, {
        name: `css-page-${pageName}`,
        entry: path.resolve(cssPagesDir, fileName),
        output: {
            filename: '[name].js',
            path: path.resolve(__dirname, 'css/dist/pages'),
        },
        plugins: [
            new MiniCssExtractPlugin({
                filename: `${pageName}.css`
            })
        ]
    });
    configs.push(cssPageConfig);
});

module.exports = configs;

关键修改说明 #

• 拆分配置：将JS和CSS的基础配置分离，避免loader规则冲突
• 替换loader：用MiniCssExtractPlugin替代file-loader，专门提取纯CSS文件，解决输出文件含JS代码的问题
• 路径修正：为每个CSS入口单独配置MiniCssExtractPlugin的输出文件名，确保main.scss输出到css/dist，页面SCSS输出到css/dist/pages
• 路径优化：使用path.resolve替代字符串拼接，适配不同操作系统的路径分隔符
• 开启压缩：重新启用CssMinimizerPlugin，生产环境下压缩CSS文件

验证步骤 #

1. 安装依赖：npm install mini-css-extract-plugin css-loader sass-loader sass css-minimizer-webpack-plugin --save-dev
2. 替换原webpack.config.js为上述代码
3. 运行Webpack：npx webpack
4. 检查输出目录：
   • css/dist/main.css 为纯CSS文件
   • css/dist/pages/ 下生成对应页面的CSS文件，无JS代码
   • JS文件输出正常

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