Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade app-npm example to latest Webpack version #794

Closed
wants to merge 1 commit into from
Closed

Upgrade app-npm example to latest Webpack version #794

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 0 additions & 27 deletions examples/app-npm-webpack/index-template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,32 +63,5 @@ <h2>Requirements</h2>
</p>
</div>

{%
var hasShownLocaleHelp;
for ( var chunk in o.htmlWebpackPlugin.files.chunks ) {
if ( /globalize-compiled-data-/.test( chunk ) && chunk !== "globalize-compiled-data-en" ) {
if ( !hasShownLocaleHelp ) {
hasShownLocaleHelp = true;
%}
<!--
Load support for the `en` (English) locale.

For displaying the application in a different locale, replace `en` with
whatever other supported locale you want, e.g., `pt` (Portuguese).

For supporting additional locales simultaneously and then having your
application to change it dynamically, load the multiple files here. Then,
use `Globalize.locale( <locale> )` in your application to dynamically set
it.
-->
{% } %}
<!-- <script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script> -->
{% } else { %}
<script src="{%=o.htmlWebpackPlugin.files.chunks[chunk].entry %}"></script>
{%
}
}
%}

</body>
</html>
13 changes: 6 additions & 7 deletions examples/app-npm-webpack/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
{
"private": true,
"devDependencies": {
"cldr-data": ">=25",
"cldr-data": "^32.0.0",
"globalize": "^1.3.0",
"globalize-webpack-plugin": "0.4.x",
"html-webpack-plugin": "^1.1.0",
"globalize-webpack-plugin": "^2.0.1",
"html-webpack-plugin": "^2.30.1",
"iana-tz-data": "^2017.1.0",
"nopt": "^3.0.3",
"webpack": "^1.9.0",
"webpack-dev-server": "^1.9.0"
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
},
"scripts": {
"start": "webpack-dev-server --config webpack-config.js --hot --progress --colors --inline",
"build": "webpack --production --config webpack-config.js"
"build": "NODE_ENV=production webpack --config webpack-config.js"
},
"cldr-data-urls-filter": "(core|dates|numbers|units)"
}
40 changes: 29 additions & 11 deletions examples/app-npm-webpack/webpack-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
var path = require('path');
var webpack = require( "webpack" );
var CommonsChunkPlugin = require( "webpack/lib/optimize/CommonsChunkPlugin" );
var HtmlWebpackPlugin = require( "html-webpack-plugin" );
var GlobalizePlugin = require( "globalize-webpack-plugin" );
var nopt = require( "nopt" );

var options = nopt({
production: Boolean
});
var options = {
production: (process.env.NODE_ENV === "production"),
chunks: [
"vendor",
"globalize-compiled-data-en",
"main"
]
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to define these? This should be created automatically by the plugin, right?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes, I think the plugin should take care of including the chunks in the right order - I just don't know how to do it

};

module.exports = {
entry: options.production ? {
Expand All @@ -22,19 +27,33 @@ module.exports = {
"globalize/dist/globalize-runtime/unit"
]
} : "./app/index.js",
debug: !options.production,
output: {
path: options.production ? "./dist" : "./tmp",
path: path.resolve(__dirname, options.production ? "./dist" : "./tmp"),
publicPath: options.production ? "" : "http://localhost:8080/",
filename: options.production ? "app.[hash].js" : "app.js"
filename: options.production ? "[name].[chunkhash].js" : "app.js"
},
resolve: {
extensions: [ "", ".js" ]
extensions: [ "*", ".js" ]
},
plugins: [
new HtmlWebpackPlugin({
production: options.production,
template: "./index-template.html"
template: "./index-template.html",

// FIXME: These 2 options are a workaround to insert i18n/[locale].[hash].js files at right spot just before main.[hash].js
chunks: options.chunks,
chunksSortMode: function (chunk1, chunk2) {
const order1 = options.chunks.indexOf(chunk1.names[0]);
const order2 = options.chunks.indexOf(chunk2.names[0]);

if (order1 > order2) {
return 1;
}
if (order1 < order2) {
return -1;
}
return 0;
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it need to be fixed in the webpack plugin instead?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe this is here as a better solution than doing something similar in the template, right? Although, it would add all the locales i18n/[locale].[hash].js. The template's purpose is just to give users a basic idea of what they need to do. Users are probably using a better rendering approach in their apps anyway. :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your description has a good summary about this, thanks.

However if you keep the i18n/en dependency and just add another one below, it seems to work as the latter de overrules the former en:

Yeap, this shouldn't happen (i.e., it shouldn't be necessary to keep en too). The test I'd make was to keep template as basic and simple as it was, i.e., to make minimal updates in this example necessary to support webpack 2.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hope the ordering issue can be solved within the plugin without the need to specify the chunks and ordering here.

}),
new GlobalizePlugin({
production: options.production,
Expand All @@ -44,8 +63,7 @@ module.exports = {
output: "i18n/[locale].[hash].js"
})
].concat( options.production ? [
new webpack.optimize.DedupePlugin(),
new CommonsChunkPlugin( "vendor", "vendor.[hash].js" ),
new CommonsChunkPlugin("vendor"),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
Expand Down
Loading