我想知道有没有人能指点我一下。
当我运行我的开发服务器，甚至有时在生产服务器上，构建会偶尔崩溃，说 JavaScript 堆已经耗尽内存。我已经尝试将调试器附加到 webpack 上，就我所知，它会在解析 less 文件时失败，但我也看到它在不同阶段运行时失败。
我完全不知道如何解决这个问题，但是有些东西告诉我必须解决此问题，而不仅仅是增加节点的 --max-old-space-size。我已经两次加倍了堆空间，但有时仍然会出现错误。目前，我已将其设置为使用 8GB 的 RAM，但仍然失败。
我附上了一个调试器的屏幕截图，链接在此，显示了潜在的内存耗尽崩溃时调试器停止的位置。你可能已经猜到了，我对 Webpack 还比较新，希望能得到任何提示，以便找到这个问题的根源，因为它确实影响了我的工作流程。 webpack.config.js
当我运行我的开发服务器，甚至有时在生产服务器上，构建会偶尔崩溃，说 JavaScript 堆已经耗尽内存。我已经尝试将调试器附加到 webpack 上，就我所知，它会在解析 less 文件时失败，但我也看到它在不同阶段运行时失败。
我完全不知道如何解决这个问题，但是有些东西告诉我必须解决此问题，而不仅仅是增加节点的 --max-old-space-size。我已经两次加倍了堆空间，但有时仍然会出现错误。目前，我已将其设置为使用 8GB 的 RAM，但仍然失败。
我附上了一个调试器的屏幕截图，链接在此，显示了潜在的内存耗尽崩溃时调试器停止的位置。你可能已经猜到了，我对 Webpack 还比较新，希望能得到任何提示，以便找到这个问题的根源，因为它确实影响了我的工作流程。 webpack.config.js
// Path to the output folder
const rootFolder = "wwwroot";
const bundleFolder = `${rootFolder}/bundle`;
const customers = [
// ### Removed
];
let entry = {
load: "./ClientApp/load.ts",
main: "./ClientApp/main.ts",
};
customers.forEach((e) => {
entry[e] = `./ClientApp/www_files/${e}/${e}.ts`;
});
module.exports = (env, args) => {
const devMode = args.mode !== "production";
return {
entry: entry,
output: {
path: path.resolve(__dirname, bundleFolder),
publicPath: " ### Removed",
filename: "[name].js",
chunkFilename: "[id].[name].[chunkhash].js",
},
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader",
},
{
test: /\.js$/,
loader: "babel-loader",
query: {
presets: ["es2015"],
compact: devMode,
},
},
{
test: /\.ts?$/,
use: [
{
loader: "awesome-typescript-loader",
},
],
},
{
test: /\.css$/,
use: [
devMode ? "vue-style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
],
},
{
test: /\.scss$/,
use: [
devMode ? "vue-style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
},
{
test: /\.less$/,
use: [
devMode ? "vue-style-loader" : MiniCssExtractPlugin.loader,
"css-loader",
"less-loader",
],
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: "file-loader",
options: {
name: "[name].[ext]?[hash]",
},
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
},
{
test: /\.(html)$/,
use: {
loader: "html-loader",
options: {
attrs: [":data-src"],
},
},
},
{
resourceQuery: /blockType=i18n/,
type: "javascript/auto",
loader: "@kazupon/vue-i18n-loader",
},
],
},
resolve: {
extensions: [".ts", ".js", ".vue", ".json"],
alias: {
vue$: "vue/dist/vue.esm.js",
},
},
devServer: {
contentBase: bundleFolder,
// Added because of bug: https://github.com/webpack/webpack-dev-server/issues/1604
disableHostCheck: true,
hot: true,
overlay: true,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods":
"GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers":
"X-Requested-With, content-type, Authorization",
},
port: 8080,
},
optimization: {
minimizer: [
new TerserPlugin(),
new OptimizeCssAssetsPlugin({}),
],
},
plugins: [
new CleanWebpackPlugin([bundleFolder]),
new webpack.HotModuleReplacementPlugin(),
new VueLoaderPlugin(),
new CheckerPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].[name].[chunkhash].css",
}),
new HardSourceWebpackPlugin(),
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
],
};
};