使用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;
        },
    }),