返回

javascript-Webpack 4未捕获类型错误:webpackJsonp\u name\u不是函数

发布时间:2022-06-29 05:49:23 324
# 前端

为什么我得到这个Uncaught TypeError: webpackJsonp_name_ is not a function at app.bundle.js:2:1 on webpack 4?

我可以看到webpack.config中没有问题。我找到了答案,但这些都是几年前的。我已经用 Optimization splitchunks 替换了 CommonChuncks 插件,应该已经解决了这个问题。

app.bundle.js

window["app"] =
webpackJsonp_name_([0],{

/***/ "./ClientApp/app.ts":
/***/ (function(module, exports, __webpack_require__) {

"use strict";

__webpack_require__("./node_modules/knockout/build/output/knockout-latest.debug.js");
__webpack_require__("./node_modules/underscore/underscore.js");
__webpack_require__("./node_modules/amplifyjs/amplify.js");
__webpack_require__("./node_modules/jquery/dist/jquery.js");
__webpack_require__("./node_modules/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.js");
__webpack_require__("./node_modules/jquery-lazyload/jquery.lazyload.js");
__webpack_require__("./node_modules/jquery-ui-bundle/jquery-ui.js");
__webpack_require__("./node_modules/jquery-validation/dist/jquery.validate.js");
__webpack_require__("./node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js");
__webpack_require__("./node_modules/block-ui/jquery.blockUI.js");
if (window !== undefined) {
    window.$ = __webpack_require__("./node_modules/jquery/dist/jquery.js");
    window.jQuery = window.$;
    window.jquery = window.$;
}


/***/ })

},["./ClientApp/app.ts"]);
//# sourceMappingURL=app.bundle.js.map

webpack.config.js

const CompressionPlugin = require("compression-webpack-plugin");
const path = require('path');
const webpack = require('webpack');
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const merge = require('webpack-merge');

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);

    // Configuration in common to both client-side and server-side bundles
    const sharedConfig = () => ({
        stats: { modules: false },
        resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    commons: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'node-static',
                        chunks: 'all'
                    }
                }
            }
        },
        output: {
            filename: '[name].js',
            publicPath: 'dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
        },
        module: {
            rules: [
                { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.(png|woff|woff2|eot|ttf|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [new CheckerPlugin()]
    });

    const cssAndSassRules = [
        { test: /\.css$/, use: ExtractTextPlugin.extract({ use: isDevBuild ? 'css-loader' : 'css-loader?minimize' }) },
        {
            test: /\.(scss)$/,
            use: [{
                loader: 'style-loader', // inject CSS to page
            }, {
                loader: 'css-loader', // translates CSS into CommonJS modules
            }, {
                loader: 'postcss-loader', // Run post css actions
                options: {
                    plugins: function () { // post css plugins, can be exported to postcss.config.js
                        return [
                            require('precss'),
                            require('autoprefixer')
                        ];
                    }
                }
            }, {
                loader: 'sass-loader' // compiles Sass to CSS
            }]
        },
        { test: /bootstrap-sass\/assets\/javascripts\//, loader: "imports?jQuery=jquery" }
    ];

    const appBundleOutputDir = './wwwroot/dist';
    const appBundleConfig = merge(sharedConfig(), {
        entry: {
            'app': './ClientApp/app.ts'
        },
        module: {
            rules: cssAndSassRules
        },
        output: {
            filename: "[name].bundle.js",
            path: path.join(__dirname, appBundleOutputDir),
            library: '[name]',
            libraryTarget: 'window',
        },
        plugins: [
            //new webpack.ProvidePlugin({ $: 'jquery', jquery: 'jquery', jQuery: 'jquery' }),
            new webpack.NamedModulesPlugin(),
            new BundleAnalyzerPlugin({
                analyzerMode: 'static',
                openAnalyzer: true
            }),
            new CompressionPlugin({
                asset: "[path].gz[query]",
                algorithm: "gzip",
                test: /\.js$|\.css$|\.html$/,
                threshold: 10240,
                minRatio: 0.8
            })
        ]
            .concat(isDevBuild ? [
                // Plugins that apply in development builds only
                new webpack.SourceMapDevToolPlugin({
                    filename: '[file].map', // Remove this line if you prefer inline source maps
                    moduleFilenameTemplate: path.relative(appBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
                })
            ] : [
                // Plugins that apply in production builds only
                new webpack.optimize.UglifyJsPlugin()
            ])
    });

    return [appBundleConfig];
};
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像