zoukankan      html  css  js  c++  java
  • webpackJsonp is not defined

    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
        }),
    好记性不如烂笔头,每天记录一点点
  • 相关阅读:
    jupyter notebook 远程连接访问服务器
    spark py4j.protocol.Py4JNetworkError: An error occurred while trying to conn
    cudart64_101.dll not found解决方法
    windows tensorflow无法下载Fashion-mnist的解决办法
    dataframe apply函数多个结果拆分给多列
    tensorflow安装
    pandas DataFrame中agg聚合后重命名列标题
    操作系统-第五章-进程调度
    操作系统-第四章-多线程编程
    操作系统-第三章-进程
  • 原文地址:https://www.cnblogs.com/wayneliu007/p/11578531.html
Copyright © 2011-2022 走看看