Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit dfac612

Browse files
author
vinogradov
committed
migrate to webpack 3. Update dependencies
1 parent f302d7b commit dfac612

File tree

4 files changed

+360
-218
lines changed

4 files changed

+360
-218
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
[See in action](https://vinogradov.github.io/react-starter-kit)
22

3-
Includes only the latest and greatest web technologies (dependencies updated at 21 June 2017). Use it for your next heroic SPA project because you can't go wrong with it. Contains minimal viable "hello, world" code just to proof it works. Remove hello world and write your own great project.
3+
Includes only the latest and greatest web technologies (dependencies updated at 13 July 2017). Use it for your next heroic SPA project because you can't go wrong with it. Contains minimal viable "hello, world" code just to proof it works. Remove hello world and write your own great project.
44

55
# Principles
66
1. Using plain [ES2015](https://babeljs.io/docs/plugins/preset-es2015/)/[16](https://babeljs.io/docs/plugins/preset-es2016/)/[17](https://babeljs.io/docs/plugins/preset-es2017/). Minimizing use of [experimental Stage-X](https://babeljs.io/docs/plugins/#presets-stage-x-experimental-presets-) javascript features. Only [stage-3](https://babeljs.io/docs/plugins/preset-stage-3/)/4 features are supported, because they're relatively stable
@@ -28,7 +28,7 @@ Name | Library Type | Original Description | Example Config | Notes
2828
[redux-saga](https://github.com/redux-saga/redux-saga) | Data management | An alternative side effect model for Redux apps | | An alternative to [redux-thunk](https://github.com/gaearon/redux-thunk). You need to `import "regenerator-runtime/runtime";` for using generators/`yield`
2929
[redux-logger](https://github.com/evgenyrodionov/redux-logger) | Utils | Logger for Redux
3030
[jest](https://github.com/facebook/jest) | Test framework | Painless JavaScript Testing
31-
[webpack 2](https://webpack.js.org/) | Build/Bundler | A module bundler for modern javascript applications (bundling, minification, watch mode, ect.) | [webpack.config.js](https://github.com/vinogradov/react-starter-kit/blob/master/webpack.config.js) | Loaders: [babel-loader](https://github.com/babel/babel-loader), [eslint-loader](https://github.com/MoOx/eslint-loader), [sass-loader](https://github.com/webpack-contrib/sass-loader)
31+
[webpack 3](https://webpack.js.org/) | Build/Bundler | A module bundler for modern javascript applications (bundling, minification, watch mode, ect.) | [webpack.config.js](https://github.com/vinogradov/react-starter-kit/blob/master/webpack.config.js) | Loaders: [babel-loader](https://github.com/babel/babel-loader), [eslint-loader](https://github.com/MoOx/eslint-loader), [sass-loader](https://github.com/webpack-contrib/sass-loader)
3232
[webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer) | Build/Bundler | Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap | |
3333
[babel](https://babeljs.io/) | Transpiler | ES2015/2016/2017 support | [.babelrc](https://github.com/vinogradov/react-starter-kit/blob/master/.babelrc) | Plugins: [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/) (spreads are currently [at STAGE 3](https://github.com/sebmarkbage/ecmascript-rest-spread))
3434
[eslint](http://eslint.org/) | Linter | The pluggable linting utility for JavaScript and JSX | [.eslintrc.js](https://github.com/vinogradov/react-starter-kit/blob/master/.eslintrc.js)

‎package.json

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"dependencies": {
1616
"babel-core": "6.25.0",
1717
"babel-jest": "20.0.3",
18-
"babel-loader": "7.1.0",
18+
"babel-loader": "7.1.1",
1919
"babel-plugin-transform-object-rest-spread": "6.23.0",
2020
"babel-preset-es2015": "6.24.1",
2121
"babel-preset-es2016": "6.24.1",
@@ -31,9 +31,9 @@
3131
"eslint-plugin-jest": "20.0.3",
3232
"eslint-plugin-jsx-a11y": "5.0.3",
3333
"eslint-plugin-react": "7.0.1",
34-
"extract-text-webpack-plugin": "2.1.2",
34+
"extract-text-webpack-plugin": "3.0.0",
3535
"file-loader": "0.11.2",
36-
"html-webpack-plugin": "2.28.0",
36+
"html-webpack-plugin": "2.29.0",
3737
"isomorphic-fetch": "2.2.1",
3838
"jest": "20.0.4",
3939
"node-sass": "4.5.3",
@@ -43,20 +43,20 @@
4343
"react-redux": "5.0.5",
4444
"react-router-dom": "4.1.1",
4545
"react-test-renderer": "15.6.1",
46-
"redux": "3.7.0",
46+
"redux": "3.7.2",
4747
"redux-logger": "3.0.6",
48-
"redux-saga": "0.15.3",
48+
"redux-saga": "0.15.4",
4949
"redux-thunk": "2.2.0",
5050
"sass-loader": "6.0.6",
51-
"script-ext-html-webpack-plugin": "1.8.1",
51+
"script-ext-html-webpack-plugin": "1.8.3",
5252
"style-loader": "0.18.2",
53-
"webpack": "2.6.1",
53+
"webpack": "3.2.0",
5454
"webpack-bundle-analyzer": "2.8.2",
5555
"webpack-chunk-hash": "0.4.0"
5656
},
5757
"devDependencies": {
58-
"husky": "0.13.4",
59-
"webpack-dev-server": "2.4.5"
58+
"husky": "0.14.3",
59+
"webpack-dev-server": "2.5.1"
6060
},
6161
"engines": {
6262
"node": ">=7.5.0"

‎webpack.config.js

Lines changed: 34 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
88
const WebpackChunkHash = require('webpack-chunk-hash');
99
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
1010

11-
function addVendorSplitting(plugins) {
11+
function getVendorSplittingPlugins(defaultPlugins) {
12+
// https://webpack.js.org/guides/caching/
13+
1214
return [
1315
new webpack.optimize.CommonsChunkPlugin({
1416
name: 'vendor',
@@ -27,18 +29,24 @@ function addVendorSplitting(plugins) {
2729
manifestVariable: 'webpackManifest',
2830
inlineManifest: true
2931
}),
30-
...plugins,
32+
...defaultPlugins,
3133
new ScriptExtHtmlWebpackPlugin({
3234
inline: 'manifest'
3335
})
3436
];
3537
}
3638

37-
function addProductionPlugins(plugins) {
39+
function getProductionPlugins(defaultPlugins, isAnalyze) {
40+
// don't use it in development to save time on recompile
3841
// https://webpack.js.org/guides/production-build/
3942

40-
return [
41-
...plugins,
43+
let plugins = [
44+
...getVendorSplittingPlugins(defaultPlugins),
45+
// looks buggy, doesn't update [chunkhash].
46+
// TODO: uncomment when migrate to webpack 3
47+
// this https://github.com/webpack/webpack/issues/5184 is supposed to fix the problem. But it looks it doesn't.
48+
// // https://medium.com/webpack/webpack-3-official-release-15fd2dd8f07b:
49+
// new webpack.optimize.ModuleConcatenationPlugin(),
4250
new webpack.optimize.UglifyJsPlugin({
4351
beautify: false,
4452
mangle: true,
@@ -48,6 +56,25 @@ function addProductionPlugins(plugins) {
4856
'process.env.NODE_ENV': JSON.stringify('production')
4957
})
5058
];
59+
60+
if (isAnalyze) {
61+
plugins = [
62+
...plugins,
63+
new BundleAnalyzerPlugin()
64+
];
65+
}
66+
67+
return plugins;
68+
}
69+
70+
function getDevelopmentPlugins(defaultPlugins) {
71+
return defaultPlugins;
72+
}
73+
74+
function getPlugins(defaultPlugins, isProduction, isAnalyze) {
75+
return isProduction ?
76+
getProductionPlugins(defaultPlugins, isAnalyze) :
77+
getDevelopmentPlugins(defaultPlugins);
5178
}
5279

5380
module.exports = (env) => {
@@ -74,7 +101,7 @@ module.exports = (env) => {
74101
cssBundleFilename = `${FILE_PATTERN_PRODUCTION}.css`;
75102
}
76103

77-
letplugins = [
104+
constDEFAULT_PLUGINS = [
78105
new ExtractTextPlugin({
79106
filename: cssBundleFilename,
80107
disable: false,
@@ -86,18 +113,8 @@ module.exports = (env) => {
86113
})
87114
];
88115

89-
if (IS_ANALYZE) {
90-
plugins = [
91-
new BundleAnalyzerPlugin(),
92-
...plugins
93-
];
94-
}
116+
const plugins = getPlugins(DEFAULT_PLUGINS, IS_PRODUCTION, IS_ANALYZE);
95117

96-
if (IS_PRODUCTION) {
97-
// don't use it in development to save time on recompile
98-
plugins = addVendorSplitting(plugins);
99-
plugins = addProductionPlugins(plugins);
100-
}
101118

102119
return {
103120
context: SRC_ABSOLUTE_PATH,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /