未捕获的类型错误：升级到 webpack 3 时无法读取未定义的属性（读取“调用”）

Question

我正在开发一个谷歌浏览器扩展，今天我尝试将 webpack 升级到版本 3（旧版是 webpack 1.x）。 现在我几乎完成并且编译工作正常，但是当我打开谷歌浏览器扩展弹出页面时，它无法显示 UI 元素。 然后我打开弹出 debbbugger 控制台并显示错误日志：

Uncaught TypeError: Cannot read properties of undefined (reading 'call')
    at __webpack_require__ (bootstrap 9e5832947e0eb0ffd7bf:54:1)
    at Object.500 (popup.js:115:1)
    at __webpack_require__ (bootstrap 9e5832947e0eb0ffd7bf:54:1)
    at webpackJsonpCallback (bootstrap 9e5832947e0eb0ffd7bf:25:1)
    at webpackJsonpCallback (bootstrap 9e5832947e0eb0ffd7bf:19:1)
    at webpackJsonpCallback (commons1.js:20:36)
    at popup.js:1:1

我检查了引导程序"bootstrap-sass": "^3.4.1",版本，它是最近一次更新是 3 年前的最新版本。 为什么会这样？ 我应该怎么做才能解决这个问题？ 这是我的项目package.json ：

{
  "private": true,
  "scripts": {
    "xpostinstall": "node ./build/install-pdf-viewer",
    "dev": "webpack --config build/webpack.dev.config.js",
    "build": "gulp --cwd . --gulpfile build/gulp-build.js",
    "test": "karma start build/karma.config.js"
  },
  "dependencies": {
    "bootstrap-sass": "^3.4.1",
    "chrome-call": "^1.0.2",
    "connect.io": "^3.1.3",
    "interact.js": "^1.2.6",
    "translation.js": "github:jiangxiaoqiang/translation.js",
    "vue": "^1.0.24",
    "vue-router": "^0.7.11"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-stage-3": "^6.5.0",
    "chrome-env": "^0.0.6",
    "css-loader": "^0.23.1",
    "del": "^2.2.0",
    "download": "^5.0.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^0.8.5",
    "fs-extra": "^8.1.0",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.3.2",
    "gulp-htmlmin": "^2.0.0",
    "gulp-jsonmin": "^1.2.0",
    "gulp-uglify": "^1.5.3",
    "gulp-zip": "^3.2.0",
    "isparta-loader": "^2.0.0",
    "jasmine-core": "^2.99.1",
    "karma": "^6.3.11",
    "karma-chrome-launcher": "^1.0.1",
    "karma-coverage": "^2.1.0",
    "karma-coveralls": "^2.1.0",
    "karma-firefox-launcher": "^1.3.0",
    "karma-ie-launcher": "^1.0.0",
    "karma-jasmine": "^1.1.2",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-safari-launcher": "^1.0.0",
    "karma-sourcemap-loader": "^0.3.8",
    "karma-webpack": "^1.7.0",
    "phantomjs-prebuilt": "^2.1.6",
    "raw-loader": "^0.5.1",
    "sass-loader": "^7.3.1",
    "sass": "^1.22.10",
    "style-loader": "^0.13.0",
    "vue-html-loader": "^1.2.0",
    "webpack": "^3.12.0",
    "webpack-cli": "^4.9.1"
  },
  "license": "GPLv3",
}

这是我的 webpack 配置：

const path = require('path');
const webpack = require( 'webpack' ) ,
  CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin ,
  ExtractTextPlugin = require( 'extract-text-webpack-plugin' );

module.exports = {
  entry : {
    bg : './src/background-scripts/' ,
    content : ['./src/content-scripts/firefox-fix.js', './src/content-scripts/'] ,
    options : './src/options/' ,
    popup : './src/popup/' ,
    'bs-lite' : './src/public/bootstrap-lite.scss'
  } ,
  output : {
    path : path.resolve(__dirname, '../src/bundle') ,
    filename : '[name].js'
  } ,
  module : {
    rules : [
      {
        test : /\.js$/ ,
        exclude : [ /node_modules(?!(\/|\\?\\)(translation\.js|selection-widget|connect\.io|chrome-env)\1)/ ] ,
        loader : 'babel-loader'
      } ,
      {
        test : /\.woff$/ ,
        loader : 'file-loader' ,
        query : {
          name : '[name].[ext]'
        }
      } ,
      {
        test : /\.html$/ ,
        loader : 'vue-html-loader'
      } , 
      {
        test : /\.(css|scss)$/ ,
        use: ExtractTextPlugin.extract({
          fallback :'style-loader',
          use: [
            'css-loader',
            {
              loader: 'sass-loader',
              options: {
                implementation: require('sass')
              }
            }]
        })
      }
    ]
  } ,
  plugins : [
    new CommonsChunkPlugin( {
      name : 'commons1',
      filename : 'commons1.js' , 
      allChunks: true,
      chunks : [ 'content' , 'popup' ] 
    }) ,
    new CommonsChunkPlugin({ 
      name: 'commons2',
      filename :'commons2.js' , 
      allChunks: true,
      chunks : [ 'commons1.js' , 'options' ] 
    }) ,
    new CommonsChunkPlugin({ 
      name: 'commons3',
      filename :'commons3.js' , 
      allChunks: true,
      chunks : [ 'bg' , 'commons2.js' ] 
    }) ,
    new ExtractTextPlugin( '[name].css' )
  ]
};

我不知道如何解决这个问题，有人遇到同样的问题吗？ 我试图在 CommonsChunkPlugin 中添加allChunks: true但没有用。 我还尝试将弹出块移动到其他人的前面来控制这样的顺序：

new CommonsChunkPlugin( {
      name : 'commons1',
      filename : 'commons1.js' , 
      allChunks: true,
      chunks : [ 'popup','content' ],
      chunksSortMode: 'manual',
    }) ,

仍然没有工作。 有人面临同样的问题吗？

Answer 1

问题很简单。 可能您在同一页面上使用通过 weback 构建的多个应用程序。 解决方法： 更改output.jsonpFunction