webpackJsonp is not defined

Posted 2022-11-29 wayneliu007

vue项目，发现有这报错。

原因是用了CommonsChunkPlugin生成了公共文件，但是页面还没有引用这个公共文件

 

使用vue-cli2：

在文件build/webpack.prod.conf.js，添加

chunks: [‘manifest‘, ‘vendor‘, ‘app‘],

new htmlWebpackPlugin(
  filename: config.build.index,
  template: ‘index.html‘,
  inject: true,
  minify: 
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
  ,
  chunks: [‘manifest‘, ‘vendor‘, ‘app‘], // 添加这行
  // necessary to consistently work with multiple chunks via CommonsChunkPlugin
  chunksSortMode: ‘dependency‘
)

然后将文件中的顺序按

[‘manifest‘, ‘vendor‘, ‘app‘]

调整一下

如下：

原来

    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin(
      name: ‘vendor‘,
      minChunks (module) 
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, ‘../node_modules‘)
          ) === 0
        )
      
    ),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin(
      name: ‘manifest‘,
      minChunks: Infinity
    ),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin(
      name: ‘app‘,
      async: ‘vendor-async‘,
      children: true,
      minChunks: 3
    ),

 

调整为

    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin(
        name: ‘manifest‘,
        minChunks: Infinity
    ),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin(
      name: ‘vendor‘,
      minChunks (module) 
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, ‘../node_modules‘)
          ) === 0
        )
      
    ),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin(
      name: ‘app‘,
      async: ‘vendor-async‘,
      children: true,
      minChunks: 3
    ),