Webpack - 未捕获的 ReferenceError:未定义 webpackJsonp
Posted
技术标签:
【中文标题】Webpack - 未捕获的 ReferenceError:未定义 webpackJsonp【英文标题】:Webpack - Uncaught ReferenceError: webpackJsonp is not defined 【发布时间】:2018-04-02 15:38:17 【问题描述】:我正在开发一个包含两个 Angular 4 应用程序的项目,但在配置 Webpack (3.5.2) 时遇到了一些问题。我在只有一个应用程序中遇到了这个错误:
Uncaught ReferenceError: webpackJsonp is not defined
at styles.bundle.js:1
(anonymous) @ styles.bundle.js:1
vendor.bundle.js:1
Uncaught ReferenceError: webpackJsonp is not defined
at vendor.bundle.js:1
(anonymous) @ vendor.bundle.js:1
main.bundle.js:1
Uncaught ReferenceError: webpackJsonp is not defined
at main.bundle.js:1
(anonymous) @ main.bundle.js:1
我的 Webpack 的配置分为两个文件:
webpack.common.js
const StringReplacePlugin = require('string-replace-webpack-plugin');
const MergeJsonWebpackPlugin = require("merge-jsons-webpack-plugin");
const utils = require('./utils.js');
module.exports = function(options)
const DATAS =
VERSION: `'$utils.parseVersion()'`,
DEBUG_INFO_ENABLED: options.env === 'development',
SERVER_API_URL: `"/"`
;
return
resolve:
extensions: ['.ts', '.js'],
modules: ['node_modules']
,
stats:
children: false
,
module:
rules: [
test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' ,
test: /\.html$/,
loader: 'html-loader',
options:
minimize: true,
caseSensitive: true,
removeAttributeQuotes:false,
minifyJS:false,
minifyCSS:false
,
exclude: ['./src/main/webapp/admin/index.html','./src/main/webapp/app/index.html']
,
test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
loaders: ['file-loader?&hash=sha512&digest=hex&name=admin/assets/fonts/[hash].[ext]']
,
test: /app.constants.ts$/,
loader: StringReplacePlugin.replace(
replacements: [
pattern: /\/\* @toreplace (\w*?) \*\//ig,
replacement: (match, p1, offset, string) => `_$p1 = $DATAS[p1];`
]
)
]
,
plugins: [
new webpack.DefinePlugin(
'process.env':
'NODE_ENV': JSON.stringify(options.env)
),
new webpack.optimize.CommonsChunkPlugin(
name: 'polyfills',
chunks: ['polyfills']
),
new webpack.optimize.CommonsChunkPlugin(
name: 'admin/app/vendor',
chunks: ['admin/app/main'],
minChunks: module => utils.isExternalLib(module)
),
new webpack.optimize.CommonsChunkPlugin(
name: ['polyfills', 'admin/app/vendor'].reverse()
),
new webpack.optimize.CommonsChunkPlugin(
name: 'app/app/vendor',
chunks: ['app/app/main'],
minChunks: module => utils.isExternalLib(module)
),
new webpack.optimize.CommonsChunkPlugin(
name: ['polyfills', 'app/app/vendor'].reverse()
),
new webpack.optimize.CommonsChunkPlugin(
name: ['manifest'],
minChunks: Infinity
),
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)@angular/,
utils.root('src/main/webapp/admin/app'),
),
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)@angular/,
utils.root('src/main/webapp/app/app'),
),
new CopyWebpackPlugin([
from: './node_modules/core-js/client/shim.min.js', to: 'core-js-shim.min.js' ,
from: './node_modules/swagger-ui/dist/css', to: 'admin/swagger-ui/dist/css' ,
from: './node_modules/swagger-ui/dist/lib', to: 'admin/swagger-ui/dist/lib' ,
from: './node_modules/swagger-ui/dist/swagger-ui.min.js', to: 'admin/swagger-ui/dist/swagger-ui.min.js' ,
from: './src/main/webapp/admin/swagger-ui/', to: 'admin/swagger-ui' ,
from: './src/main/webapp/admin/favicon.ico', to: 'admin/favicon.ico' ,
from: './src/main/webapp/static/', to: 'static' ,
from: './src/main/webapp/admin/assets', to: 'admin/assets' ,
from: './src/main/webapp/app/assets', to: 'app/assets'
]),
new webpack.ProvidePlugin(
$: "jquery",
jQuery: "jquery",
echarts: "echarts"
),
new MergeJsonWebpackPlugin(
output:
groupBy: [
pattern: "./src/main/webapp/admin/i18n/pt-br/*.json", fileName: "./admin/i18n/pt-br.json" ,
pattern: "./src/main/webapp/admin/i18n/en/*.json", fileName: "./admin/i18n/en.json"
]
),
new HtmlWebpackPlugin(
template: './src/main/webapp/admin/index.html',
chunksSortMode: 'dependency',
inject: 'body',
filename: 'admin/index.html',
excludeChunks: ['app/app/main','app/app/styles', 'app/app/vendor']
),
new HtmlWebpackPlugin(
template: './src/main/webapp/app/index.html',
chunksSortMode: 'dependency',
inject: 'body',
filename: 'app/index.html',
excludeChunks: ['admin/app/main','admin/app/styles', 'admin/app/vendor']
),
new StringReplacePlugin()
]
;
;
webpack.dev.js
const webpack = require('webpack');
const writeFilePlugin = require('write-file-webpack-plugin');
const webpackMerge = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const path = require('path');
const utils = require('./utils.js');
const commonConfig = require('./webpack.common.js');
const ENV = 'development';
module.exports = webpackMerge(commonConfig( env: ENV ),
devtool: 'eval-source-map',
devServer:
contentBase: './target/www',
proxy: [
context: [
'/api',
'/management',
'/swagger-resources',
'/v2/api-docs',
'/h2-console'
],
target: 'http://127.0.0.1:8080',
secure: false
]
,
entry:
polyfills: './src/main/webapp/shared/polyfills',
'admin/app/styles': './src/main/webapp/admin/app/@theme/styles/styles.scss',
'admin/app/main': './src/main/webapp/admin/app/app.main',
'app/app/styles': './src/main/webapp/app/app/app.main',
'app/app/main': './src/main/webapp/app/app/app.scss'
,
output:
path: utils.root('target/www'),
publicPath: '/',
filename: '[name].bundle.js',
chunkFilename: '[id].chunk.js'
,
module:
rules: [
test: /\.ts$/,
enforce: 'pre',
loaders: 'tslint-loader',
exclude: ['node_modules', new RegExp('reflect-metadata\\' + path.sep + 'Reflect\\.ts')]
,
test: /\.ts$/,
loaders: [
'awesome-typescript-loader',
'angular-router-loader?debug=true',
'angular2-template-loader'
],
exclude: ['node_modules/generator-jhipster']
,
test: /\.scss$/,
loaders: ['to-string-loader', 'css-loader', 'sass-loader'],
exclude: /(styles\.scss)/
,
test: /(styles\.scss)/,
loaders: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader']
,
test: /\.css$/,
loaders: ['to-string-loader', 'css-loader'],
exclude: /(styles\.css)/
,
test: /(styles\.css)/,
loaders: ['style-loader', 'css-loader']
]
,
plugins: [
new BrowserSyncPlugin(
host: 'localhost',
port: 9000,
proxy:
target: 'http://localhost:9060'
,
reload: false
),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.NamedModulesPlugin(),
new writeFilePlugin(),
new webpack.WatchIgnorePlugin([
utils.root('src/test')
]),
new WebpackNotifierPlugin(
title: 'JHipster',
contentImage: path.join(__dirname, 'logo-jhipster.png')
)
]
);
目录结构按预期生成:
我在这个配置中做错了什么?
【问题讨论】:
相关帖子 - Ionic 2: ReferenceError: webpackJsonp is not defined 【参考方案1】:我和一个朋友谈过,他说我的问题是 index.html 中导入文件的顺序,应该是:
<script type="text/javascript" src="/manifest.bundle.js"></script>
<script type="text/javascript" src="/polyfills.bundle.js"></script>
<script type="text/javascript" src="/app/app/vendor.bundle.js"></script>
<script type="text/javascript" src="/app/app/styles.bundle.js"></script>
<script type="text/javascript" src="/app/app/main.bundle.js"></script>
但是:
<script type="text/javascript" src="/app/app/styles.bundle.js"></script>
<script type="text/javascript" src="/app/app/vendor.bundle.js"></script>
<script type="text/javascript" src="/app/app/main.bundle.js"></script>
<script type="text/javascript" src="/manifest.bundle.js"></script>
<script type="text/javascript" src="/polyfills.bundle.js"></script>
所以我可以使用两种方法中的一种,对两个项目只使用一个供应商,或者配置 HtmlWebpackPlugin 来手动订购文件。因为我可以为这两个应用程序使用一个供应商,所以我决定只使用一个供应商:
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const StringReplacePlugin = require('string-replace-webpack-plugin');
const MergeJsonWebpackPlugin = require("merge-jsons-webpack-plugin");
const utils = require('./utils.js');
module.exports = function(options)
const DATAS =
VERSION: `'$utils.parseVersion()'`,
DEBUG_INFO_ENABLED: options.env === 'development',
SERVER_API_URL: `"/"`
;
return
resolve:
extensions: ['.ts', '.js'],
modules: ['node_modules']
,
stats:
children: false
,
module:
rules: [
test: /bootstrap\/dist\/js\/umd\//, loader: 'imports-loader?jQuery=jquery' ,
test: /\.html$/,
loader: 'html-loader',
options:
minimize: true,
caseSensitive: true,
removeAttributeQuotes:false,
minifyJS:false,
minifyCSS:false
,
exclude: ['./src/main/webapp/admin/index.html','./src/main/webapp/app/index.html']
,
test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
loaders: ['file-loader?&hash=sha512&digest=hex&name=admin/assets/fonts/[hash].[ext]']
,
test: /app.constants.ts$/,
loader: StringReplacePlugin.replace(
replacements: [
pattern: /\/\* @toreplace (\w*?) \*\//ig,
replacement: (match, p1, offset, string) => `_$p1 = $DATAS[p1];`
]
)
]
,
plugins: [
new webpack.DefinePlugin(
'process.env':
'NODE_ENV': JSON.stringify(options.env)
),
new webpack.optimize.CommonsChunkPlugin(
name: 'polyfills',
chunks: ['polyfills']
),
new webpack.optimize.CommonsChunkPlugin(
name: 'vendor',
chunks: ['admin/app/main','app/app/main'],
minChunks: module => utils.isExternalLib(module)
),
new webpack.optimize.CommonsChunkPlugin(
name: ['polyfills', 'vendor'].reverse()
),
new webpack.optimize.CommonsChunkPlugin(
name: ['manifest'],
minChunks: Infinity
),
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)@angular/,
utils.root('src/main/webapp/admin/app'),
),
new webpack.ContextReplacementPlugin(
/angular(\\|\/)core(\\|\/)@angular/,
utils.root('src/main/webapp/app/app'),
),
new CopyWebpackPlugin([
from: './node_modules/core-js/client/shim.min.js', to: 'core-js-shim.min.js' ,
from: './node_modules/swagger-ui/dist/css', to: 'admin/swagger-ui/dist/css' ,
from: './node_modules/swagger-ui/dist/lib', to: 'admin/swagger-ui/dist/lib' ,
from: './node_modules/swagger-ui/dist/swagger-ui.min.js', to: 'admin/swagger-ui/dist/swagger-ui.min.js' ,
from: './src/main/webapp/admin/swagger-ui/', to: 'admin/swagger-ui' ,
from: './src/main/webapp/admin/favicon.ico', to: 'admin/favicon.ico' ,
from: './src/main/webapp/static/', to: 'static' ,
from: './src/main/webapp/admin/assets', to: 'admin/assets' ,
from: './src/main/webapp/app/assets', to: 'app/assets'
]),
new webpack.ProvidePlugin(
$: "jquery",
jQuery: "jquery",
echarts: "echarts"
),
new MergeJsonWebpackPlugin(
output:
groupBy: [
pattern: "./src/main/webapp/admin/i18n/pt-br/*.json", fileName: "./admin/i18n/pt-br.json" ,
pattern: "./src/main/webapp/admin/i18n/en/*.json", fileName: "./admin/i18n/en.json"
]
),
new HtmlWebpackPlugin(
template: './src/main/webapp/admin/index.html',
chunksSortMode: 'dependency',
inject: 'body',
filename: 'admin/index.html',
excludeChunks: ['app/app/main','app/app/styles']
),
new HtmlWebpackPlugin(
template: './src/main/webapp/app/index.html',
chunksSortMode: 'dependency',
inject: 'body',
filename: 'app/index.html',
excludeChunks: ['admin/app/main','admin/app/styles']
),
new StringReplacePlugin()
]
;
;
【讨论】:
以上是关于Webpack - 未捕获的 ReferenceError:未定义 webpackJsonp的主要内容,如果未能解决你的问题,请参考以下文章
Webpack - 未捕获的 ReferenceError:未定义 webpackJsonp
Webpack:Bundle.js - 未捕获的 ReferenceError:未定义进程
Angular 2/webpack 中的“未捕获的 ReferenceError:未定义要求”
未捕获的类型错误:在 webpack 重建 CommonsChunkPlugin 后无法读取未定义的属性“调用”