尝试使用 Webpack 编译 AdminLTE 和 Bootstrap

问题描述

我正在尝试通过 admin-lte@2.4.18 将 bootstrap@3.4.1 和 less@4.1.1 与 webpack@5.39.0 捆绑在一起。

我的 webpack.config.js 看起来像这样：

const path = require('path');

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = (env,argv) => {
    const distPath = path.resolve('dist');
    const srcPath = path.resolve('src');

    const config = {
        entry: {
            'bundle': path.join(srcPath,'js/index.js'),},output: {
            chunkFilename: 'assets/[name].js',filename: '[name].js',path: distPath
        },module: {
            rules: [
                {
                    test: /\.vue$/,exclude: /(node_modules|bower_components)/,use: 'vue-loader',{
                    test: /\.js$/,use: {
                        loader: 'babel-loader',options: {
                            plugins: [
                                "@babel/plugin-Syntax-dynamic-import","@babel/plugin-Syntax-object-rest-spread",],presets: [
                                '@babel/preset-env',compact: false,}
                    }
                },{
                    test: /\.css$/,oneOf: [
                        // this matches `<style module>`
                        {
                            resourceQuery: /module/,use: [
                                MiniCssExtractPlugin.loader,{
                                    loader: 'css-loader',options: {
                                        modules: true,localIdentName: '[local]_[hash:base64:5]'
                                    }
                                }
                            ]
                        },// this matches plain `<style>` or `<style scoped>`
                        {
                            use: [
                                MiniCssExtractPlugin.loader,'css-loader'
                            ]
                        }
                    ]
                },{
                    test: /\.less$/,localIdentName: '[local]_[hash:base64:5]'
                                    },'less-loader',]
                        },'css-loader',]
                        }
                    ]
                },{
                    test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,use: "file-loader"
                }
            ]
        },plugins: [
            new MiniCssExtractPlugin({
                filename: 'bundle.css',}),new VueLoaderPlugin(),resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js',}
        },};
    
    return config;
};

和我的 main.less 像这样：

@import "~bootstrap/less/bootstrap.less";
@import "~admin-lte/build/less/AdminLTE.less";

当我尝试构建我的项目时，我得到：

Fatal error: Ineffective mark-compacts near heap limit Allocation Failed - JavaScript heap out of memory
 1: 00007FF704A3285F napi_wrap+119263
 2: 00007FF7049D9526 v8::internal::OrderedHashTable<v8::internal::OrderedHashSet,1>::NextTableOffset+38102
 3: 00007FF7049DA326 node::OnFatalError+438
 4: 00007FF705217AAE v8::Isolate::ReportExternalAllocationLimitReached+94     
 5: 00007FF7051FFC61 v8::SharedArrayBuffer::Externalize+833
 6: 00007FF7050B143C v8::internal::Heap::EphemeronKeyWriteBarrierFromCode+1436
 7: 00007FF7050BC680 v8::internal::Heap::ProtectUnprotectedMemoryChunks+1312  
 8: 00007FF7050B9194 v8::internal::Heap::PageFlagsAreConsistent+3204
 9: 00007FF7050AE993 v8::internal::Heap::CollectGarbage+1283
10: 00007FF7050AD004 v8::internal::Heap::AddRetainedMap+2500
11: 00007FF7050CE48B v8::internal::Factory::NewFixedArrayWithFiller+107
12: 00007FF7050C7317 v8::internal::Factory::InternalizeString<unsigned short>+471
13: 00007FF704F1DD3A v8::internal::HashTable<v8::internal::NumberDictionary,v8::internal::NumberDictionaryShape>::New+122
14: 00007FF7051CA05E v8::internal::Builtins::builtin_handle+317374
15: 00007FF7051C54D8 v8::internal::Builtins::builtin_handle+298040
16: 00007FF7051C503E v8::internal::Builtins::builtin_handle+296862
17: 00007FF70566CD5D v8::internal::SetupIsolateDelegate::SetupHeap+547181
18: 000001C9E13154E6

似乎没有任何调试方法。但我设法弄清楚的是，LESS 似乎陷入了 ~bootstrap/less/mixins/grid-framework.less 的无限循环中。这个 mixin 似乎是罪魁祸首：

.loop-grid-columns(@index,@class,@type) when (@index >= 0) {
  .calc-grid-column(@index,@type);
  // next iteration
  .loop-grid-columns((@index - 1),@type);
}

这很奇怪，因为它有一个 when -guard 运算符。

有没有人设法做到这一点？我在 GitHub (ColorlibHQ/AdminLTE) 上找到了 issue。不幸的是，我似乎无法让提到的修复工作。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）