Webpack 4报错Uncaught TypeError: webpackJsonp_name_ is not a function

使用Webpack 4执行项目构建时，控制台抛出如下错误：
Uncaught TypeError: webpackJsonp_name_ is not a function at app.bundle.js:2:1

已排查webpack.config.js未发现配置错误，且已按照Webpack 4版本要求将CommonChunksPlugin替换为optimization.splitChunks配置，此前检索到的同类问题解决方案均为适配Webpack旧版本的过时方案，无法解决当前问题。

构建产物 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);

    // 客户端、服务端bundle通用配置
    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开发中间件，会自动处理该URL前缀的请求
        },
        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', // 将CSS注入页面
            }, {
                loader: 'css-loader', // 将CSS转为CommonJS模块
            }, {
                loader: 'postcss-loader', // 执行postcss处理
                options: {
                    plugins: function () { // postcss插件配置，也可单独导出到postcss.config.js
                        return [
                            require('precss'),
                            require('autoprefixer')
                        ];
                    }
                }
            }, {
                loader: 'sass-loader' // 将Sass编译为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 ? [
                // 仅开发环境生效的插件
                new webpack.SourceMapDevToolPlugin({
                    filename: '[file].map', // 若需要内联sourcemap可删除该行
                    moduleFilenameTemplate: path.relative(appBundleOutputDir, '[resourcePath]') // sourcemap映射到源文件原始磁盘位置
                })
            ] : [
                // 仅生产环境生效的插件
                new webpack.optimize.UglifyJsPlugin()
            ])
    });

    return [appBundleConfig];
};

这个报错的核心原因是splitChunks拆分出的公共chunk未被正确引入，或页面脚本加载顺序错误：

• 配置的splitChunks规则会将node_modules下的依赖拆分到名为node-static的独立chunk，Webpack用来加载异步chunk、串联模块依赖的webpackJsonp运行时函数，就定义在这个公共chunk中。业务chunkapp.bundle.js执行时必须依赖这个函数。
• 如果HTML中先加载app.bundle.js后加载node-static.js，或者根本没有引入拆分出的node-static.js，执行app.bundle.js时就会找不到webpackJsonp_name_函数，直接抛出类型错误。

修复步骤：

• 检查HTML页面的脚本引入顺序，必须先引入公共chunk node-static.bundle.js，再引入业务chunk app.bundle.js，确保执行业务代码前Webpack运行时已经完成初始化。
• 如果不想单独引入公共chunk，可以调整optimization配置，关闭runtimeChunk抽离，避免跨chunk的运行时依赖：

optimization: {
    runtimeChunk: false, // 不单独抽离Webpack运行时代码
    splitChunks: {
        cacheGroups: {
            commons: {
                test: /[\\/]node_modules[\\/]/,
                name: 'node-static',
                chunks: 'all'
            }
        }
    }
}

• 额外排查插件兼容问题：当前使用的extract-text-webpack-plugin在Webpack 4中必须安装@next版本才能正常工作，否则可能生成异常的构建产物，建议替换为Webpack 4官方推荐的mini-css-extract-plugin规避兼容问题。

内容的提问来源于stack exchange，提问作者Ronald Abellano