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
        }),
    好记性不如烂笔头,每天记录一点点
  • 相关阅读:
    Ubuntu16.04安装openldap和phpldapadmin
    Java 8 中的抽象类和接口到底有啥区别?
    Redis 开发陷阱及避坑指南!
    Java 中的 6 颗语法糖
    Java 8 有多牛逼?打破一切你对接口的认知!
    Git操作常用的命令都在这里了。
    Github 太狠了,居然把 "master" 干掉了!
    微服务业务日志收集方案,写得非常好!
    Maven基本介绍与安装
    IntelliJ IDEA 调试 Java 8 Stream,实在太香了!
  • 原文地址:https://www.cnblogs.com/wayneliu007/p/11578531.html
Copyright © 2011-2022 走看看