Do you want to request a feature or report a bug?
bug
What is the current behavior?
After packaging, the loading page will appear this situation:
Uncaught ReferenceError: webpackJsonp is not defined
at vendor.0d1ec0a758.js:1
Uncaught ReferenceError: webpackJsonp is not defined
at app.ec87183347.js:1
View the page js load order, like this:
vendor.0d1ec0a758.js
app.ec87183347.js
mainifest.b14e5d617f.js?368&x9wj=0i
webpack config:
var webpack = require('webpack'),
config = require('./webpack.base.conf'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
CopyWebpackPlugin = require('copy-webpack-plugin'),
CleanWebpackPlugin = require('clean-webpack-plugin'),
ExtractTextPlugin = require('extract-text-webpack-plugin'),
SOURCE_MAP = false;
config.output.filename = '[name].[chunkhash:10].js';
config.output.chunkFilename = '[name].[chunkhash:10].js';
config.devtool = SOURCE_MAP ? 'source-map' : false;
config.module.loaders.push({
test: /\.css$/,
loader: ExtractTextPlugin.extract('style', 'css')
}, {
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css!sass')
});
config.plugins.push(
new CleanWebpackPlugin('build', {
root: config.commonPath.rootPath,
verbose: false
}),
new CopyWebpackPlugin([
{
context: config.commonPath.staticDir,
from: '**/*',
ignore: ['*.md']
}
]),
// new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
}
}),
// new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'mainifest']
}),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.MinChunkSizePlugin({
minChunkSize: 30000
}),
new ExtractTextPlugin('[name].[contenthash:6].css', {
// allChunks : true
}),
new HtmlWebpackPlugin({
filename: 'index.html',
favicon: config.commonPath.favicon,
template: config.commonPath.template,
chunksSortMode: 'dependency',
hash: false,
inject: 'body'
})
);
module.exports = config;
index.html :
……
<script type="text/javascript" src="mainifest.7adaf766e3.js"></script>
<script type="text/javascript" src="vendor.a74e31e640.js"></script>
<script type="text/javascript" src="app.4cf76f96d7.js"></script>
……
Js loading order is incorrect.
If the current behavior is a bug, please provide the steps to reproduce.
What is the expected behavior?
The expected page loading order is:
mainifest.7adaf766e3.js
vendor.a74e31e640.js
app.4cf76f96d7.js?559&x9wj=0i
Follow this order to load, then this issue does not appear.How can i guarantee the js loading order?
If this is a feature request, what is motivation or use case for changing the behavior?
Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
the browser version: Google Chrome 58.0.3029.110 (64-bit)
Node.js version: v6.9.5
webpack version: ~1.13.2 (Note: version 2.0 Also appears this issue)
Operating System: Window 7
I am based on the solution in this issue:
https://github.com/webpack/webpack/issues/959
Done these two changes:
1.
Then, the page loading order does not matter.
But who can tell me why?
You must load the chunks in the correct order. Run webpack with
--display-entrypointsand it will print the correct order.You can sort the list like this :
new HtmlWebpackPlugin({
template: ‘src/index.html’,
filename: ‘dist/index.html’,
chunksSortMode: function (chunk1, chunk2) {
var order = [‘polyfills’, ‘vendor’, ‘images’, ‘app’];
var order1 = order.indexOf(chunk1.names[0]);
var order2 = order.indexOf(chunk2.names[0]);
return order1 – order2;
}
}),
I also have the same problem, How to resolve it?
@lydiali9 try clearing your cache and ensuring the vendor.js loads prior to app.js