Webpack构建使堆内存不足

编程问答 2022-06-11

问题描述

我有一个React应用。我需要为其添加图表功能，因此添加了amChart4。在dev-server上，一切正常，但是在构建程序包时，我一直在堆满内存。这是我的webpack.config.js 

var webpack = require('webpack');
const TerserPlugin = require('terser-webpack-plugin');
var path = require('path');

var isProduction =
  process.argv.indexOf('-p') >= 0 || process.env.NODE_ENV === 'production';
var sourcePath = path.join(__dirname,'./src');
var outPath = path.join(__dirname,'./build');

var HtmlWebpackPlugin = require('html-webpack-plugin');
var MiniCssExtractPlugin = require('mini-css-extract-plugin');
var WebpackCleanupPlugin = require('webpack-cleanup-plugin');
var copyPlugin = require('copy-webpack-plugin');

module.exports = {
  context: sourcePath,entry: {
    app: './main.tsx',},output: {
    path: outPath,filename: isProduction ? '[contenthash].js' : '[hash].js',chunkFilename: isProduction
      ? '[name].[contenthash].js'
      : '[name].[hash].js',target: 'web',resolve: {
    extensions: ['.js','.ts','.tsx'],mainFields: ['module','browser','main'],alias: {
      app: path.resolve(__dirname,'src/app/'),'react-dom': '@hot-loader/react-dom',module: {
    rules: [
      {
        test: path.resolve(__dirname,'node_modules/xmllint/xmllint.js'),use: [
          'imports-loader?require=>null','exports-loader?xmllint'
        ]
      },{
        test: /\.tsx?$/,use: [
          !isProduction && {
            loader: 'babel-loader',options: { plugins: ['react-hot-loader/babel']},{
            loader: 'ts-loader',options: { allowTsInNodeModules: true},].filter(Boolean),{
        test: /\.css$/i,use: ['style-loader','css-loader'],{ test: /\.html$/,use: 'html-loader' },{ test: /\.(a?png|svg)$/,use: 'url-loader?limit=10000' },{
        test: /\.(jpe?g|gif|bmp|mp3|mp4|ogg|wav|eot|ttf|woff|woff2)$/,use: 'file-loader',{
        test: /\.js$/,include: path.resolve(__dirname,"node_modules/@amcharts"),use: {
          loader: "babel-loader",options: {
            presets: ["@babel/preset-env"],plugins: ["@babel/plugin-Syntax-dynamic-import"]
          }
        }
      }
    ],optimization: {
    splitChunks: {
      name: true,cacheGroups: {
        commons: {
          chunks: 'initial',minChunks: 2,vendors: {
          test: /[\\/]node_modules[\\/]/,chunks: 'all',priority: -10,filename: isProduction
            ? 'vendor.[contenthash].js'
            : 'vendor.[hash].js',runtimeChunk: true,plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',DEBUG: false,}),new WebpackCleanupPlugin(),new MiniCssExtractPlugin({
      filename: isProduction ? '[contenthash].css' : '[hash].css',disable: !isProduction,new HtmlWebpackPlugin({
      template: 'assets/index.html',new copyPlugin({
      patterns: [
        { from: 'assets/pdfAssets',to: 'assets/pdfAssets' },],devServer: {
    contentBase: sourcePath,hot: true,inline: true,historyApiFallback: {
      disableDotRule: true,stats: 'minimal',clientLogLevel: 'warning',devtool: isProduction ? '' : 'eval-source-map',node: {
    fs: 'empty',net: 'empty',externals:[{ws:{}},function(context,request,callback) {

    if (/pdfmake|xlsx|canvg|html2canvas|dompurify/.test(request)) {
      return callback(null,'commonjs ' + request);
    }

    callback();
  }]
};

堰部分是。如果我将外部设备更改为

externals:function(context,callback) {
    
        if (/pdfmake|xlsx|canvg|html2canvas|dompurify|ws/.test(request)) {
          return callback(null,'commonjs ' + request);
        }
    
        callback();
      }

然后构建就可以了，但是我不能在开发服务器上运行它了。我不断收到要求未定义的错误。

我需要对我的webpack配置进行哪些更改才能使其构建和运行而没有任何问题？

解决方法

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

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

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

amcharts4reactjsreactjswebpackwebpackwebpack