Webpack 2 Ausnahme - Uncaught Reference: webpackJsonp nicht

Question

definiert Ich verwende webpack 2 und wen ausführen ich die webpack-dev-Server, den ich in meinem Browser bekommen

Die Ausnahme: „Nicht abgefangene Reference: webpackJsonp nicht definiert ist . "

Diese Ausnahme starten, wenn ich versuche, Lieferantenbrocken zu erstellen.

meine webpack.config.js Datei:

'use strict'; 

const webpack = require('webpack'); 
const path = require('path'); 
const webpackMerge = require('webpack-merge'); 
const CleanWebpackPlugin = require('clean-webpack-plugin'); 
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin'); 
const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin'); 


// Webpack Config 
let webpackConfig = { 
    entry: { 
     'main': './src/main.ts', 
     'vendors': './src/vendors.ts' 
    }, 
    target: 'web', //https://webpack.js.org/configuration/target/ 
    output: { 
     publicPath: '', 
     path: path.resolve(__dirname, './dist') 
    }, 

    plugins: [ 
     new CleanWebpackPlugin(['./dist'], { 
      verbose: true, 
      dry: false 
     }), 


     new CommonsChunkPlugin({ 
      names: ['vendors'], 
      filename: '[name].js' 
     }), 


     new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows 
      /angular(\\|\/)core(\\|\/)src(\\|\/)linker/, 
      path.resolve(__dirname, './src'), 
      { 
       // your Angular Async Route paths relative to this root directory 
      } 
     ) 
    ], 

    module: { 
     rules: [ 
      { 
       enforce: 'pre', 
       test: /\.ts$/, 
       loader: 'tslint-loader', 
       exclude: /(node_modules)/ 
      }, 
      { 
       test: /\.ts$/, 
       use: [ 
        'awesome-typescript-loader', 
        'angular2-template-loader', 
        'angular2-router-loader' 
       ] 
      }, 
      { 
       test: /\.scss$/, 
       use: ['to-string-loader', 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader'] 
      }, 
      { 
       test: /\.css$/, 
       use: ['to-string-loader', 'css-loader'] 
      }, 
      { 
       test: /\.html$/, 
       use: 'raw-loader' 
      } 
     ] 
    } 

}; 


// Our Webpack Defaults 
let defaultConfig = { 
    devtool: 'source-map', 

    output: { 
     filename: '[name].bundle.js', 
     sourceMapFilename: '[name].map', 
     chunkFilename: '[id].chunk.js' 
    }, 

    resolve: { 
     extensions: ['.ts', '.js'], 
     modules: [path.resolve(__dirname, 'node_modules')] 
    }, 

    devServer: { 
     historyApiFallback: true, 
     watchOptions: {aggregateTimeout: 300, poll: 1000}, 
     headers: { 
      "Access-Control-Allow-Origin": "*", 
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS", 
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization" 
     } 
    }, 

    node: { 
     global: true, 
     crypto: 'empty', 
     __dirname: true, 
     __filename: true, 
     process: true, 
     Buffer: false, 
     clearImmediate: false, 
     setImmediate: false 
    } 
}; 


module.exports = webpackMerge(defaultConfig, webpackConfig); 

mein package.json

{ 
    "name": "infra-template-ng-2", 
    "version": "1.0.0", 
    "description": "A infra template for Angular2", 
    "license": "MIT", 
    "homepage": "https://ilgitlab/sizmek-ui-infra/infra-angular-tow-template/tree/master", 
    "scripts": { 
    "build": "webpack --progress", 
    "watch": "npm run build --watch", 
    "server": "webpack-dev-server --inline --progress --colors --port 3000 --content-base src --open", 
    "start": "npm run server" 
    },  
    "dependencies": { 
    "@angular/common": "~2.4.6", 
    "@angular/compiler": "~2.4.6", 
    "@angular/compiler-cli": "~2.4.6", 
    "@angular/core": "~2.4.6", 
    "@angular/forms": "~2.4.6", 
    "@angular/platform-browser": "~2.4.6", 
    "@angular/platform-browser-dynamic": "~2.4.6", 
    "angular2-ui-switch": "^1.2.0", 
    "core-js": "~2.4.1", 
    "ie-shim": "~0.1.0", 
    "reflect-metadata": "~0.1.9", 
    "rxjs": "~5.1.0", 
    "zone.js": "~0.7.6" 
    }, 
    "devDependencies": { 
    "@types/node": "^6.0.48", 
    "angular2-router-loader": "^0.3.4", 
    "angular2-template-loader": "^0.6.0", 
    "awesome-typescript-loader": "^3.0.3", 
    "clean-webpack-plugin": "^0.1.15", 
    "codelyzer": "^2.0.0-beta.4", 
    "css-loader": "^0.25.0", 
    "json-loader": "^0.5.4", 
    "node-sass": "^4.3.0", 
    "postcss-loader": "^1.2.2", 
    "raw-loader": "^0.5.1", 
    "sass-loader": "^4.1.1", 
    "source-map-support": "^0.4.11", 
    "style-loader": "^0.13.1", 
    "to-string-loader": "^1.1.4", 
    "tslint": "^4.4.1", 
    "tslint-loader": "^3.3.0", 
    "typescript": "~2.1.5", 
    "webpack": "^2.2.1", 
    "webpack-dev-server": "^2.2.1", 
    "webpack-merge": "^2.6.1" 
    }, 
    "keywords": [ 
    "Angular 2 Infra Template" 
    ], 
    "repository": { 
    "type": "git", 
    "url": "git@ilgitlab:sizmek-ui-infra/infra-angular-tow-template.git" 
    } 
} 

mein tsconfig.json

{ 
    "compilerOptions": { 
     "target": "es5", 
     "module": "commonjs", 
     "outDir": "dist", 
     "rootDir": ".", 
     "sourceMap": true, 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "moduleResolution": "node", 
     "typeRoots": [ 
      "node_modules/@types" 
     ], 
     "lib": [ 
      "es6", 
      "dom" 
     ] 
    }, 
    "exclude": [ 
     "node_modules" 
    ], 
    "awesomeTypescriptLoaderOptions": { 
     "useWebpackText": true 
    }, 
    "angularCompilerOptions": { 
     "debug": false 
    }, 
    "compileOnSave": false, 
    "buildOnSave": false, 
    "atom": { 
     "rewriteTsconfig": false 
    } 
} 

mein vendors.ts

import '@angular/platform-browser'; 
import '@angular/platform-browser-dynamic'; 
import '@angular/core'; 
import '@angular/compiler'; 
import '@angular/common'; 
import '@angular/http'; 
import '@angular/forms'; 

meine index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset=UTF-8> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Infra Template</title> 
    <base href="/"> 
    </head> 
    <body> 

    <infra-app> 
     Loading... 
    </infra-app> 

     <script async src="vendors.js"></script> 
     <script async src="main.bundle.js"></script> 

    </body> 
</html> 

Answer 1

Dieser Fehler während der Laufzeit tritt auf, wenn die webpackJsonp Funktion (natürlich) nicht definiert ist hehe, aber was bedeutet das?

So gibt es drei Arten von Blöcken in webpack:

Initial Brocken über CommonsChunkPlugin erstellt werden, die Cache-Fähigkeit zu verbessern, aber sie sind synchron geladen und verlassen sich auf die webpackJsonp-Funktion, die in der definiert ist, Webpack Runtime (auch bekannt als Eingangs-Chunk).

tl; dr Ihre Skripts werden nicht in der richtigen Reihenfolge geladen. Wenn Sie html-webpack-plugin verwenden, können Sie die Option chunkSort in Ihrer Konfiguration verwenden, um dies zu beheben. Dies kann auch oft durch obskure Kombinationen von mehreren CommonsChunkPlugin passieren.

Mein bester Rat wäre, CommonsChunkPlugin zu entfernen und nur ein Bündel zu erstellen, und dann eins nach dem anderen den benötigten Code in einzelne Bündel aufteilen, um herauszufinden, wo das Ordnungsproblem auftritt.

Answer 2

einschliessen vendor.js in Ihrem index.html

hier ist voll HTML-Code:

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Ionic App</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
    <meta name="format-detection" content="telephone=no"> 
    <meta name="msapplication-tap-highlight" content="no"> 

    <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"> 
    <link rel="manifest" href="manifest.json"> 
    <meta name="theme-color" content="#4e8ef7"> 

    <!-- cordova.js required for cordova apps --> 
    <script src="cordova.js"></script> 

    <!-- un-comment this code to enable service worker 
    <script> 
    if ('serviceWorker' in navigator) { 
     navigator.serviceWorker.register('service-worker.js') 
     .then(() => console.log('service worker installed')) 
     .catch(err => console.log('Error', err)); 
    } 
    </script>--> 
    <!-- The vendor js is generated during the build process 
     It contains all of the dependencies in node_modules --> 
    <script src="build/vendor.js"></script> 
    <!-- The main bundle js is generated during the build process --> 
    <link href="build/main.css" rel="stylesheet"> 

</head> 

<body> 

    <!-- Ionic's root component and where the app will load --> 
    <ion-app></ion-app> 

    <!-- cordova.js required for cordova apps --> 
    <script src="cordova.js"></script> 

    <!-- The polyfills js is generated during the build process --> 
    <script src="build/polyfills.js"></script> 

    <!-- The vendor js is generated during the build process 
     and includes all files in the node_modules directory --> 
    <script src="build/vendor.js"></script> 

    <!-- The bundle js is generated during the build process --> 
    <script src="build/main.js"></script> 

</body> 
</html>