webpack 如何修复块加载失败?

cczfrluj  于 2022-12-04  发布在  Webpack
关注(0)|答案(1)|浏览(150)

我正在尝试使用Vue和Monaco编辑器制作一个Web应用程序,前端使用ASP.NET Core 3,后端使用ASP.NET Core 3。我也在使用webpack,因为我使用的是Vue单页组件。我是webpack的新手,并不了解它的所有功能。无论如何,webpack将构建拆分为几个文件(看起来是块)。然而,当加载网页时,我不断收到错误Uncaught (in promise) ChunkLoadError: Loading chunk 2 failed.我试图在谷歌上搜索答案,但到目前为止我所做的一切都没有起作用。
下面是我的package.json和webpack.config.json。
Package.json

{
    "name": "parvis",
    "version": "1.0.0",
    "description": "This is a description",
    "main": "main.js",
    "scripts": {
        "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
        "serve": "cross-env NODE_ENV=development webpack --devtool source-map --progress --hide-modules",
        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
    },
    "keywords": [
        "dataflow"
    ],
    "author": "Marin Aglić Čuvić",
    "license": "MIT",
    "dependencies": {
        "bootstrap": "^4.3.1",
        "bootstrap-vue": "^2.0.2",
        "escodegen": "^1.12.0",
        "filbert": "^0.1.20",
        "lodash": "^4.17.15",
        "monaco-editor": "^0.18.1",
        "monaco-editor-webpack-plugin": "^1.7.0",
        "vee-validate": "^3.0.8",
        "vue": "^2.6.10",
        "vue-monaco": "^1.1.0",
        "vue-router": "^3.1.3"
    },
    "devDependencies": {
        "@babel/core": "^7.6.2",
        "@babel/preset-env": "^7.6.2",
        "babel-loader": "^8.0.6",
        "cross-env": "^6.0.3",
        "css-loader": "^3.2.0",
        "html-webpack-plugin": "^3.2.0",
        "rimraf": "^3.0.0",
        "uglifyjs-webpack-plugin": "^2.2.0",
        "vue-loader": "^15.7.1",
        "vue-style-loader": "^4.1.2",
        "vue-template-compiler": "^2.6.10",
        "webpack": "^4.41.0",
        "webpack-cli": "^3.3.9",
        "webpack-dev-server": "^3.8.2"
    }
    
    }

这是我的webpack.config.js。

const path = require('path');
    const webpack = require('webpack');
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
    const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
    
    module.exports = {
        mode: process.env.NODE_ENV,
        entry: {
            main: './wwwroot/client/src/main.js',
            // 'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js'
        },
        output: {
            globalObject: 'self',
            path: path.resolve(__dirname, './wwwroot/vuebundles/'),
            publicPath: '/wwwroot/vuebundles/',
            filename: '[name].build.js',
            chunkFilename: '[name].chunk.js'
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        'vue-style-loader',
                        'css-loader'
                    ],
                }, {
                    test: /\.vue$/,
                    loader: 'vue-loader',
                },
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /\.(png|jpg|gif|svg)$/,
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]?[hash]'
                    }
                },
            ]
        },
        plugins: [
            new VueLoaderPlugin(),
            new MonacoWebpackPlugin({
                languages: ['javascript', 'csharp']
            })
        ]
    };

我知道类似的问题在过去也有过,但大多数都没有得到回答。我尝试过的任何解决方案都对我不起作用。

ql3eal8s

ql3eal8s1#

我花了很长时间才发现我的publicPath是错误的,可能是因为在webpack开始创建块之前我没有使用它。总之,publicPath属性应该是:

publicPath: '/vuebundles/',

没有“wwwroot”。

相关问题