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

Posted 2023-03-14

【中文标题】Webpack 编译的 CSS 文件包含 Javascript 变量和函数

【英文标题】：Webpack-compiled CSS file is including Javascript variables and functions

【发布时间】：2021-12-06 16:19:34

【问题描述】：

我们使用 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 我能够解决问题。

【问题讨论】：

webpack 每次都会创建文件 public/css/cpg.css 吗？在我看来，其他地方有一个剩余的无效文件。

是的，我每次尝试重新编译时都会删除 cpg.css 文件，并且它总是以相同的方式编译。更改混合编译的顺序（重新排列 webpack.mix.js 中的行）也没有任何影响。我认为你是对的，但它看起来像是属于内部 webpack 文件的代码，而不是编译的文件之一。我们的 JS 文件都没有使用任何已识别的 JS 代码。

【参考方案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
                )
            
        ]

【讨论】：

没有用，但进一步的研究表明：github.com/WearyMonkey/ngtemplate-loader/issues/10。我意识到这个问题没有直接关系，但是那里显示的代码是相关的。看起来我看到的 JS 函数是由 webpack 生成的，作为隐藏在我的实现中某处的动态 require 方法的一部分。这个动态需要的模块正在与我的 cpg.css 一起打包。清空 cpg.scss 没有任何改变——所以不是文件的内容触发了这个放错位置的动态需求。这是另一回事。

也可以是这个laracasts.com/discuss/channels/elixir/…，因为这里唯一的包是moment

或github.com/laravel-mix/laravel-mix/issues/1976

是的，我刚刚发现了同样的事情。看起来它现在刚刚坏掉了。我猜我得追踪我所有的动态导入。