webpack - 使用 globalize-webpack-plugin 进行生产

Question

我拿了这个例子并稍微编辑了一下:
https://github.com/globalizejs/globalize/tree/master/examples/app-npm-webpack

我的 package.json

{
  "private": true,
  "devDependencies": {
    "cldr-data": "^30.0.4",
    "globalize": "^1.2.2",
    "globalize-webpack-plugin": "^0.3.10",
    "html-webpack-plugin": "^2.28.0",
    "webpack": "^2.2.1"
  },
  "dependencies": {
    "react": "^15.4.2"
  }
}

我的 webpack.config.js

var webpack = require( "webpack" );
var CommonsChunkPlugin = require( "webpack/lib/optimize/CommonsChunkPlugin" );
var HtmlWebpackPlugin = require( "html-webpack-plugin" );
var GlobalizePlugin = require( "globalize-webpack-plugin" );

module.exports = {
    entry: {
        main: "./src/app.js",
        vendor: [
            'globalize',
            'globalize/dist/globalize-runtime/number',
            'globalize/dist/globalize-runtime/currency',
            'globalize/dist/globalize-runtime/date',
            'globalize/dist/globalize-runtime/message',
            'globalize/dist/globalize-runtime/plural',
            'globalize/dist/globalize-runtime/relative-time',
            'globalize/dist/globalize-runtime/unit'
        ]
    },
    output: {
        filename: 'bundle.[hash].js',
        path: './dist'
    },
    resolve: {
        extensions: [".js"]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'test',
            filename: 'index.html'
        }),
        new GlobalizePlugin({
            production: true,
            developmentLocale: "en",
            supportedLocales: [ "en" ],
            messages: "messages/[locale].json",
            output: "i18n/[locale].[hash].js"
        }),
        new CommonsChunkPlugin({
            name: 'vendor',
            filename: 'vendor.[hash].js'
        }),
    ]
};

和我的 app.js

var Globalize = require('globalize');
//var react = require('react'); //!!!!!!!!!!!!!!!!!!!!!!!!!!

var f = Globalize.numberFormatter({ maximumFractionDigits: 0, useGrouping: false })

console.log(f(34.4535));

然后我在命令行上写了“webpack”，我的应用程序已经收集了。打开 chrome，应用程序就可以工作了。但我想注意连接文件的顺序:



但是，如果我取消注释该行 var react = require('react');并且我的应用程序已收集，然后当我打开 chrome 时，我看到以下内容:




你能帮助我吗？

Answer 1

手动定义订单:

const CHUNK_ORDER = {
    "vendor": 1,
    "globalize-compiled-data-en": 2,
    "main": 3
};

并通过排序功能:

    new HtmlWebpackPlugin({
        title: 'test',
        filename: 'index.html',
        chunksSortMode: function(a, b) {
            return CHUNK_ORDER[a.names[0]] > CHUNK_ORDER[b.names[0]] ? 1 : -1;
        },
    }),