ReferenceError: webpackJsonp n'est pas défini

Question

J'ai une application VUE 2 qui ne fonctionne pas avec iisnode et iis. Le journal stderr de iisnode dit: ReferenceError: webpackJsonp n'est pas défini

version de noeud: 6.9.5 Version NPM: 4.3.0

Ce sujet est souvent mentionné ici, mais la solution ne fonctionne pas pour moi . Mon fournisseur se charge avant le fichier app.js, mais j'obtiens cette erreur.

Voici mes fichiers de configuration pour webpack:

bundle.js:

require('./check-versions')() 

process.env.NODE_ENV = 'production' 

var ora = require('ora') 
var rm = require('rimraf') 
var path = require('path') 
var chalk = require('chalk') 
var webpack = require('webpack') 
var config = require('../config') 
var webpackConfig = require('./webpack.prod.conf') 

var spinner = ora('building for production...') 
spinner.start() 

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 
    if (err) throw err 
    webpack(webpackConfig, function (err, stats) { 
    spinner.stop() 
    if (err) throw err 
    process.stdout.write(stats.toString({ 
     colors: true, 
     modules: false, 
     children: false, 
     chunks: false, 
     chunkModules: false 
    }) + '\n\n') 

    console.log(chalk.cyan(' Build complete.\n')) 
    console.log(chalk.yellow(
     ' Tip: built files are meant to be served over an HTTP server.\n' + 
     ' Opening index.html over file:// won\'t work.\n' 
    )) 
    }) 
}) 

webpack.base.conf.js:

var path = require('path') 
var utils = require('./utils') 
var config = require('../config') 
var vueLoaderConfig = require('./vue-loader.conf') 

function resolve (dir) { 
    return path.join(__dirname, '..', dir) 
} 

module.exports = { 
    entry: { 
    app: './src/main.js' 
    }, 
    output: { 
    path: config.build.assetsRoot, 
    filename: '[name].js', 
    publicPath: process.env.NODE_ENV === 'production' 
     ? config.build.assetsPublicPath 
     : config.dev.assetsPublicPath 
    }, 
    externals: { 
    'jquery': 'jQuery' 
    }, 
    resolve: { 
    extensions: ['.js', '.vue', '.json'], 
    modules: [ 
     resolve('src'), 
     resolve('node_modules') 
    ], 
    alias: { 
     'vue$': 'vue/dist/vue.common.js', 
     'src': resolve('src'), 
     'assets': resolve('src/assets'), 
     'components': resolve('src/components') 
    } 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.(js|vue)$/, 
     loader: 'eslint-loader', 
     enforce: "pre", 
     include: [resolve('src'), resolve('test')], 
     options: { 
      formatter: require('eslint-friendly-formatter') 
     } 
     }, 
     { 
     test: /\.vue$/, 
     loader: 'vue-loader', 
     options: vueLoaderConfig 
     }, 
     { 
     test: /\.js$/, 
     loader: 'babel-loader', 
     include: [resolve('src'), resolve('test')] 
     }, 
     { 
     test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 
     loader: 'url-loader', 
     query: { 
      limit: 10000, 
      name: utils.assetsPath('img/[name].[hash:7].[ext]') 
     } 
     }, 
     { 
     test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 
     loader: 'url-loader', 
     query: { 
      limit: 10000, 
      name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 
     } 
     } 
    ] 
    } 
} 

webpack.prod.conf.js:

var path = require('path') 
var utils = require('./utils') 
var webpack = require('webpack') 
var config = require('../config') 
var merge = require('webpack-merge') 
var baseWebpackConfig = require('./webpack.base.conf') 
var CopyWebpackPlugin = require('copy-webpack-plugin') 
var HtmlWebpackPlugin = require('html-webpack-plugin') 
var ExtractTextPlugin = require('extract-text-webpack-plugin') 
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 

var env = process.env.NODE_ENV === 'testing' 
    ? require('../config/test.env') 
    : config.build.env 

var webpackConfig = merge(baseWebpackConfig, { 
    module: { 
    rules: utils.styleLoaders({ 
     sourceMap: config.build.productionSourceMap, 
     extract: true 
    }) 
    }, 
    devtool: config.build.productionSourceMap ? '#source-map' : false, 
    output: { 
    path: config.build.assetsRoot, 
    filename: utils.assetsPath('js/[name].[chunkhash].js'), 
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 
    }, 
    plugins: [ 
    // http://vuejs.github.io/vue-loader/en/workflow/production.html 
    new webpack.DefinePlugin({ 
     'process.env': env 
    }), 
    new webpack.optimize.UglifyJsPlugin({ 
     compress: { 
     warnings: false 
     }, 
     sourceMap: true 
    }), 
    // extract css into its own file 
    new ExtractTextPlugin({ 
     filename: utils.assetsPath('css/[name].[contenthash].css') 
    }), 
    // Compress extracted CSS. We are using this plugin so that possible 
    // duplicated CSS from different components can be deduped. 
    new OptimizeCSSPlugin(), 
    // generate dist index.html with correct asset hash for caching. 
    // you can customize output by editing /index.html 
    // see https://github.com/ampedandwired/html-webpack-plugin 
    new HtmlWebpackPlugin({ 
     filename: process.env.NODE_ENV === 'testing' 
     ? 'index.html' 
     : 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 
     }, 
     // necessary to consistently work with multiple chunks via CommonsChunkPlugin 
     chunksSortMode: 'dependency' 
    }), 
    // split vendor js into its own file 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: 'vendor', 
     minChunks: function (module, count) { 
     // 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', 
    // chunks: ['vendor'] 
    //}), 
    // copy custom static assets 
    new CopyWebpackPlugin([ 
     { 
     from: path.resolve(__dirname, '../static'), 
     to: config.build.assetsSubDirectory, 
     ignore: ['.*'] 
     } 
    ]) 
    ] 
}) 

if (config.build.productionGzip) { 
    var CompressionWebpackPlugin = require('compression-webpack-plugin') 

    webpackConfig.plugins.push(
    new CompressionWebpackPlugin({ 
     asset: '[path].gz[query]', 
     algorithm: 'gzip', 
     test: new RegExp(
     '\\.(' + 
     config.build.productionGzipExtensions.join('|') + 
     ')$' 
    ), 
     threshold: 10240, 
     minRatio: 0.8 
    }) 
) 
} 

if (config.build.bundleAnalyzerReport) { 
    var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 
    webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 
} 

module.exports = webpackConfig 

config.js:

// see http://vuejs-templates.github.io/webpack for documentation. 
var path = require('path') 

module.exports = { 
    build: { 
    env: require('./prod.env'), 
    index: path.resolve(__dirname, '../wwwroot/index.html'), 
    assetsRoot: path.resolve(__dirname, '../wwwroot/'), 
    assetsSubDirectory: 'static', 
    assetsPublicPath: '', 
    productionSourceMap: true, 
    // Gzip off by default as many popular static hosts such as 
    // Surge or Netlify already gzip all static assets for you. 
    // Before setting to `true`, make sure to: 
    // npm install --save-dev compression-webpack-plugin 
    productionGzip: false, 
    productionGzipExtensions: ['js', 'css'], 
    // Run the build command with an extra argument to 
    // View the bundle analyzer report after build finishes: 
    // `npm run build --report` 
    // Set to `true` or `false` to always turn it on or off 
    bundleAnalyzerReport: process.env.npm_config_report 
    }, 
    dev: { 
    env: require('./dev.env'), 
    port: 80, 
    autoOpenBrowser: true, 
    assetsSubDirectory: 'static', 
    assetsPublicPath: '', 
    proxyTable: {}, 
    // CSS Sourcemaps off by default because relative paths are "buggy" 
    // with this option, according to the CSS-Loader README 
    // (https://github.com/webpack/css-loader#sourcemaps) 
    // In our experience, they generally work as expected, 
    // just be aware of this issue when enabling this option. 
    cssSourceMap: false 
    } 
} 

.bablerc:

{ 
    "presets": [ "es2015", "stage-0" ], 
    "plugins": [ "transform-runtime" ], 
    "comments": false, 
    "env": { 
    "test": { 
     "plugins": [ "istanbul" ] 
    } 
    } 
} 

package.json

{ 
    "name": "coreui-vue", 
    "version": "1.0.0-alpha.4", 
    "description": "Open Source Admin Template", 
    "author": "Łukasz Holeczek <lukasz@holeczek.pl>", 
    "private": true, 
    "scripts": { 
    "dev": "node build/dev-server.js", 
    "build": "node build/build.js", 
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run", 
    "e2e": "node test/e2e/runner.js", 
    "test": "npm run unit && npm run e2e", 
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" 
    }, 
    "dependencies": { 
    "auth0-js": "^8.8.0", 
    "axios": "^0.16.1", 
    "jwt-decode": "^2.2.0", 
    "mini-toastr": "^0.6.5", 
    "strip-ansi": "^4.0.0", 
    "jquery": "^3.2.1", 
    "vue": "2.2.4", 
    "vue-chartjs": "2.5.4", 
    "vue-notifications": "^0.8.0", 
    "vue-router": "^2.2.0", 
    "vue-strap": "github:wffranco/vue-strap", 
    "vue-video-player": "^3.0.8", 
    "vuex": "^2.3.1", 
    "aspnet-webpack": "^2.0.1", 
    "autoprefixer": "6.7.7", 
    "babel-core": "6.24.0", 
    "babel-eslint": "7.2.0", 
    "babel-loader": "^7.1.1", 
    "babel-plugin-istanbul": "3.1.2", 
    "babel-plugin-transform-runtime": "^6.22.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-stage-0": "^6.24.1", 
    "babel-register": "6.24.0", 
    "chai": "^3.5.0", 
    "chalk": "^1.1.3", 
    "chromedriver": "2.28.0", 
    "connect-history-api-fallback": "^1.3.0", 
    "copy-webpack-plugin": "^4.0.1", 
    "cross-env": "3.2.4", 
    "cross-spawn": "^5.0.1", 
    "css-loader": "0.26.4", 
    "eslint": "3.18.0", 
    "eslint-config-standard": "6.2.1", 
    "eslint-friendly-formatter": "^2.0.7", 
    "eslint-loader": "^1.6.1", 
    "eslint-plugin-html": "^2.0.0", 
    "eslint-plugin-promise": "3.5.0", 
    "eslint-plugin-standard": "2.1.1", 
    "eventsource-polyfill": "^0.9.6", 
    "express": "4.15.2", 
    "extract-text-webpack-plugin": "2.1.0", 
    "file-loader": "^0.10.0", 
    "friendly-errors-webpack-plugin": "1.6.1", 
    "function-bind": "^1.1.0", 
    "html-webpack-plugin": "^2.28.0", 
    "http-proxy-middleware": "0.17.4", 
    "inject-loader": "2.0.1", 
    "karma": "^1.4.1", 
    "karma-coverage": "^1.1.1", 
    "karma-mocha": "^1.3.0", 
    "karma-phantomjs-launcher": "1.0.4", 
    "karma-sinon-chai": "^1.2.4", 
    "karma-sourcemap-loader": "^0.3.7", 
    "karma-spec-reporter": "0.0.26", 
    "karma-webpack": "2.0.3", 
    "lolex": "^1.5.2", 
    "mocha": "^3.2.0", 
    "nightwatch": "0.9.13", 
    "opn": "^4.0.2", 
    "optimize-css-assets-webpack-plugin": "^1.3.0", 
    "ora": "^1.1.0", 
    "phantomjs-prebuilt": "^2.1.14", 
    "rimraf": "^2.6.0", 
    "sass-loader": "4.1.1", 
    "selenium-server": "3.3.1", 
    "semver": "^5.3.0", 
    "sinon": "1.17.7", 
    "sinon-chai": "2.9.0", 
    "url-loader": "^0.5.7", 
    "vue-loader": "^13.0.2", 
    "vue-style-loader": "2.0.4", 
    "vue-template-compiler": "2.2.4", 
    "webpack": "^2.2.1", 
    "webpack-bundle-analyzer": "2.3.1", 
    "webpack-dev-middleware": "^1.10.0", 
    "webpack-hot-middleware": "^2.16.1", 
    "webpack-merge": "2.6.1" 
    }, 
    "devDependencies": { 

    }, 
    "engines": { 
    "node": ">= 4.0.0", 
    "npm": ">= 3.0.0" 
    } 
} 

Je déplacé les devDependencies également aux dépendances pour être sûr, ce n'est pas le problème.

Mon produit index.html ressemble:

<!DOCTYPE html><html><head><meta charset=utf-8><title>CoreUI - Open Source Bootstrap Admin Template</title><link href=static/css/font-awesome.min.css rel=stylesheet><link href=static/css/simple-line-icons.css rel=stylesheet><link href=static/css/style.css rel=stylesheet><link href=static/css/app.06e44e579e587787413ab48c2c604c4d.css rel=stylesheet></head><body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden"><div id=app></div><script type=text/javascript src=static/js/vendor.2cb2e5935748c34893e8.js></script><script type=text/javascript src=static/js/app.9dc82c9f50710d9ababd.js></script></body></html> 

J'espère que quelqu'un peut vous aider. Merci!

Dominik

Answer 1

MISE À JOUR: Uncommnet le code que vous avez ci-dessous:

// 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', 
chunks: ['vendor'] 
}), 

Donc, fondamentalement commenter ce que vous avez maintenant et uncomment celui-ci :). Cela va essentiellement sortir Webpack dans son propre fichier et l'insérer avant le fichier du fournisseur et s'assurera que vous avez injecté ces fonctions manquantes dans la fenêtre. Cela est dû au fait que la version de webpack ne changera presque jamais pendant votre développement alors que d'autres plugins/libraries/plugins pourraient changer et vous pouvez séparer webpack d'autres libs pour que les utilisateurs ne les téléchargent pas inutilement chaque fois que vous ajoutez un nouveau composant ou changer une version et déployer.