• 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
        }),
    好记性不如烂笔头,每天记录一点点
  • 相关阅读:
    node md5
    Iptables入门教程
    centos 6.5 yum安装lnmp
    SSH日志位置
    【收藏】实战Nginx与PHP(FastCGI)的安装、配置与优化
    读《微博春晚背后的技术故事》笔记
    下载整个网页的方法,包括样式、图片、和js
    【收藏】下载Chrome商店插件的方法,万恶的gwd
    nginx变量
    【收藏】SSH原理与运用
  • 原文地址:https://www.cnblogs.com/wayneliu007/p/11578531.html
Copyright © 2020-2023  润新知