Webpack 编译的 CSS 文件包含 Javascript 变量和函数

Question

我们使用 webpack/mix 的简单应用：

mix.js('resources/js/app.js', 'public/js')
.js('resources/js/cpg.js', 'public/js')
.js('resources/js/editor.js', 'public/js')
.copy('resources/js/ckeditor/dist', 'public/js/editor')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/cpg.scss', 'public/css')

使用 webpack.config.js：

module.exports = {
resolve: {
    alias: {
        '@': path.resolve('resources/js'),
    },
},

// https://webpack.js.org/configuration/entry-context/
entry: './resources/js/editor.js',

// https://webpack.js.org/configuration/output/
output: {
    path: path.resolve(__dirname, 'public/js/editor'),
    filename: 'editor.js'
},

module: {
    rules: [
        {
            test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,

            use: ['raw-loader']
        },
        {
            test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,

            use: [
                {
                    loader: 'style-loader',
                    options: {
                        injectType: 'singletonStyleTag',
                        attributes: {
                            'data-cke': true
                        }
                    }
                },
                {
                    loader: 'postcss-loader',
                    options: styles.getPostCssConfig({
                        themeImporter: {
                            themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                        },
                        minify: true
                    })
                }
            ]
        }
    ]
},

// Useful for debugging.
devtool: 'source-map',

// By default webpack logs warnings if the bundle is bigger than 200kb.
performance: { hints: false }
}

在添加 ckeditor 之前，我们没有遇到任何问题。但是现在添加了ckeditor，下面的JS现在出现在我们编译好的cpg.css文件中：

 function webpackContext(req) {
    var id = webpackContextResolve(req);
    return __webpack_require__(id);
}
function webpackContextResolve(req) {
    if(!__webpack_require__.o(map, req)) {
        var e = new Error("Cannot find module '" + req + "'");
        e.code = 'MODULE_NOT_FOUND';
        throw e;
    }
    return map[req];
}
webpackContext.keys = function webpackContextKeys() {
    return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./node_modules/moment/locale sync recursive ^\\.\\/.*$";

显然，这是一个问题。 JS 代码不属于 CSS 文件，它会绊倒我们的 SonarCloud 质量门（有充分的理由），因此除非我们手动编辑已编译的文件，否则我们无法部署任何已编译的内容。这在很大程度上违背了拥有它们的目的。

进一步的背景故事：我们项目中使用 CKEditor 的部分是由承包商完成的。因此，在我们发现编译文件不正确之前，所有这些都被合并到了我们的项目中。承包商不再在公司工作，所以我试图自己调试，但一无所获。 Webpack 将 JS 代码放在 CSS 文件中似乎是一个极其罕见的错误。

进度更新：删除 ckeditor 引用没有影响。 Webpack 现在似乎被打破了。综合 node_modules 重新安装没有效果。它只是坏了。

问题似乎是https://github.com/laravel-mix/laravel-mix/issues/1976 的副本。升级到 Mix 6 会给我的项目带来绝对荒谬的问题，所以这将无法解决。

按照此处的说明进行操作：https://github.com/laravel-mix/laravel-mix/issues/2633#issuecomment-802023077 我能够解决问题。

Answer 1

可能与此https://github.com/ckeditor/ckeditor5/issues/8112 有关 那里的解决方案暗示了这种变化

        use: [
            {
                loader: 'style-loader',
                options: {
                    injectType: 'singletonStyleTag',
                    attributes: {
                        'data-cke': true
                    }
                }
            },
            'css-loader', // added this line
            {
                loader: 'postcss-loader',
                options: styles.getPostCssConfig({
                    themeImporter: {
                        themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                    },
                    minify: true
                })
            }
        ]