webpackJsonp is not defined

Daniel :

So the error message is essentially saying you forgot that other script tag, remember that bundle.js? Well you need to do the same for vendor.js.\n\nSo we now have these separate javascript files, we may need to do some more code splitting, but we have this index.html file where we need to ensure we have a single script file for every script file thats generated. We might even argue that the script tags that you do have in your index.html file are messy or not properly formatted and so on.\n\nI don’t know about you, but the number of scripts might vary and I don’t want to have to change my index.html file manually to accommodate for that and go through all this trouble you are going through right now.\n\nI would hate to have to remember that every time we change our webpack file, we also have to go over to index.html and add in additional script tags as well.\n\nTo solve this issue we are going to add in a plugin to your webpack.config.js file called HtmlWebpackPlugin.\n\nThe purpose of the plugin is to replace or make obsolete the need to manually maintain the script tags inside this html document.\n\nSo our webpack process is going to run, it will spit out some number of scripts and the plugin will automatically generate an html document for us that has the correct script inside of it.\n\nYou you install the plugin like so:\n\nnpm install —save-dev html-webpack-plugin\n\nIn the webpack.config.js file you will require in that module like so:\n\nvar HtmlWebpackPlugin = require(‘html-webpack-plugin’);\n\nAt the bottom you will add it to your plugins section like so:\n\nplugins: [\n new webpack.optimize.CommonsChunkPlugin({\n name: 'vendor'\n }),\n new HtmlWebpackPlugin({\n\n })\n ]\n};\n\n\nNotice how my CommonsChunkPlugin looks different to yours? Go with my setup.\n\nNow you need to pass some amount of configuration to this thing. \n\nFirst, pass in a reference to an html template for web pack to use. So npm run build will automatically generate this html for you with some script tags inside it, but when you don’t provide it a template, it will just do the best job it can do without a template because it does not know what setup it has inside your html document, it would not know about any customization you might want to use. To ensure the plugin takes the customization into account you have to tell it the following:\n\nplugins: [\n new webpack.optimize.CommonsChunkPlugin({\n name: 'vendor'\n }),\n new HtmlWebpackPlugin({\n template: 'src/index.html'\n })\n ]\n\n\nSo this setup requires that you now move your index.html from your root directory to your src/ folder and the justification for that is because we are now treating it as a template.\n\n\nFind your script tag and delete the existing script tag. Why? The purpose of this plugin is to say for every javascript document that was generated by webpack, its going to automatically add a script tag into this html document for us, so we don’t have to manually do it ourselves.\n\n\nSo now when you run webpack, the plugin will run. The plugin will take the index.html template and manually add a script tag in there for every javascript file you added and then it will output a new html document into your dist/ directory.\n\nnpm run build\n\nNow you should have an index.html document inside your dist/ directory and if you look inside of it, underneath the div tag you will notice that there are two additional script tags that have been injected inside your document.\n\nYou will notice you have the script tag references for both vendor.js and bundle.js.\n\nSo now as you start to add in more entry points or more code splitting or more anything from Webpack the html plugin will automatically inject it into the html document for you.\n\nTest it out by opening your application in terminal with the command to manually open your dist/ directory and ensure everything works:\n\nopen dist/index.html\n\nYour browser should open up, you should be in the dist/ directory, it grabs the html document and voila you have your application working and displaying properly on the screen and if you open up the elements tab, you still have vendor.js and bundle.js in there and you did not have to do a single manual thing to the script tags.\n\nWhy do this?\n\nAside from the hassle of getting the ReferenceError: webpackJsonp is not defined, you are doing it this way because over time you might change the number of script tags or even the names of the script tags that are outputted by webpack.\n\nBy using this plugin it will add all the scripts to your index.html document.\n\nSo thats another step forward on your application. All the best.",

2018-10-30T17:45:35

Jee Mok :

Try adding Infinity into your module section:\n\nmodule: {\n ...\n\n // 第三方库合并\n plugins: [\n new webpack.optimize.CommonsChunkPlugin('vendor' , 'vendor.bundle.js', Infinity)\n ]\n}\n",

2018-10-24T08:04:08