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];
};
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报