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 d2f13c5

Browse files
author
vinogradov
committed
(feature) add vendor splitting, (chore) update dependencies
1 parent 6170388 commit d2f13c5

File tree

4 files changed

+225
-143
lines changed

4 files changed

+225
-143
lines changed

‎.eslintrc.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ module.exports = {
44
browser: true
55
},
66
rules: {
7-
'object-curly-spacing': ['warn', 'never'],
8-
'comma-dangle': ['warn', 'never'],
9-
'max-len': ['warn', 120],
7+
'object-curly-spacing': ['error', 'never'],
8+
'comma-dangle': ['error', 'never'],
9+
'max-len': ['error', 120],
1010
'react/jsx-filename-extension': ['off'],
11-
'max-lines': ['warn', {max: 600, skipBlankLines: true, skipComments: true}]
11+
'max-lines': ['error', {max: 600, skipBlankLines: true, skipComments: true}]
1212
}
1313
};

‎package.json

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,22 @@
55
"main": "index.js",
66
"scripts": {
77
"start": "webpack-dev-server",
8-
"dist": "webpack --display-error-details --env.dist",
8+
"dist": "webpack --display-error-details --env.production",
99
"test": "jest src",
1010
"lint": "eslint . && eslint --no-ignore --config .eslintrc.js --config .eslintrc-test.js --ext test.js .",
1111
"prepush": "yarn test && yarn lint"
1212
},
1313
"license": "MIT",
1414
"dependencies": {
15-
"babel-core": "6.24.1",
15+
"babel-core": "6.25.0",
1616
"babel-jest": "20.0.3",
1717
"babel-loader": "7.0.0",
1818
"babel-plugin-transform-object-rest-spread": "6.23.0",
1919
"babel-preset-es2015": "6.24.1",
2020
"babel-preset-es2016": "6.24.1",
2121
"babel-preset-es2017": "6.24.1",
2222
"babel-preset-react": "6.24.1",
23+
"chunk-manifest-webpack-plugin": "1.1.0",
2324
"clean-webpack-plugin": "0.1.16",
2425
"css-loader": "0.28.4",
2526
"eslint": "3.19.0",
@@ -36,8 +37,8 @@
3637
"jest": "20.0.4",
3738
"node-sass": "4.5.3",
3839
"prop-types": "15.5.10",
39-
"react": "15.5.4",
40-
"react-dom": "15.5.4",
40+
"react": "15.6.0",
41+
"react-dom": "15.6.0",
4142
"react-redux": "5.0.5",
4243
"react-router-dom": "4.1.1",
4344
"react-test-renderer": "15.5.4",
@@ -46,8 +47,10 @@
4647
"redux-saga": "0.15.3",
4748
"redux-thunk": "2.2.0",
4849
"sass-loader": "6.0.5",
50+
"script-ext-html-webpack-plugin": "1.8.1",
4951
"style-loader": "0.18.2",
50-
"webpack": "2.6.1"
52+
"webpack": "2.6.1",
53+
"webpack-chunk-hash": "0.4.0"
5154
},
5255
"devDependencies": {
5356
"husky": "0.13.4",

‎webpack.config.js

Lines changed: 82 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,50 +3,99 @@ const path = require('path');
33
const ExtractTextPlugin = require('extract-text-webpack-plugin');
44
const Clean = require('clean-webpack-plugin');
55
const HtmlWebpackPlugin = require('html-webpack-plugin');
6+
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
7+
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
8+
const WebpackChunkHash = require('webpack-chunk-hash');
69

7-
const SRC_PATH = 'src';
8-
const SRC_ABSOLUTE_PATH = path.join(__dirname, SRC_PATH);
9-
const INDEX_HTML_TEMPLATE_ABSOLUTE_PATH = path.join(SRC_ABSOLUTE_PATH, 'index.html');
10+
function addVendorSplitting(plugins) {
11+
return [
12+
new webpack.optimize.CommonsChunkPlugin({
13+
name: 'vendor',
14+
minChunks(module) {
15+
return module.context && module.context.indexOf('node_modules') >= 0;
16+
}
17+
}),
18+
new webpack.optimize.CommonsChunkPlugin({
19+
name: 'manifest',
20+
minChunks: Infinity
21+
}),
22+
new webpack.HashedModuleIdsPlugin(),
23+
new WebpackChunkHash(),
24+
new ChunkManifestPlugin({
25+
filename: 'chunk-manifest.json',
26+
manifestVariable: 'webpackManifest',
27+
inlineManifest: true
28+
}),
29+
...plugins,
30+
new ScriptExtHtmlWebpackPlugin({
31+
inline: 'manifest'
32+
})
33+
];
34+
}
1035

11-
constDIST_PATH='dist';
12-
constDIST_ABSOLUTE_PATH=path.join(__dirname,DIST_PATH);
36+
functionaddProductionPlugins(plugins){
37+
// https://webpack.js.org/guides/production-build/
1338

14-
const APPLICATION_BUNDLE_FILENAME = 'app-[hash].js';
15-
const CSS_BUNDLE_FILENAME = 'app-[hash].css';
16-
17-
const plugins = [
18-
new ExtractTextPlugin({
19-
filename: CSS_BUNDLE_FILENAME,
20-
disable: false,
21-
allChunks: true
22-
}),
23-
new Clean([DIST_PATH]),
24-
new HtmlWebpackPlugin({
25-
template: INDEX_HTML_TEMPLATE_ABSOLUTE_PATH,
26-
inject: 'body'
27-
})
28-
];
29-
30-
module.exports = (env) => {
31-
if (env && env.dist) {
32-
// https://webpack.js.org/guides/production-build/
33-
plugins.push(new webpack.optimize.UglifyJsPlugin({
39+
return [
40+
...plugins,
41+
new webpack.optimize.UglifyJsPlugin({
3442
beautify: false,
3543
mangle: true,
3644
comments: false
37-
}));
38-
39-
plugins.push(new webpack.DefinePlugin({
45+
}),
46+
new webpack.DefinePlugin({
4047
'process.env.NODE_ENV': JSON.stringify('production')
41-
}));
48+
})
49+
];
50+
}
51+
52+
module.exports = (env) => {
53+
const SRC_PATH = 'src';
54+
const SRC_ABSOLUTE_PATH = path.join(__dirname, SRC_PATH);
55+
const INDEX_HTML_TEMPLATE_ABSOLUTE_PATH = path.join(SRC_ABSOLUTE_PATH, 'index.html');
56+
57+
const DIST_PATH = 'dist';
58+
const DIST_ABSOLUTE_PATH = path.join(__dirname, DIST_PATH);
59+
60+
// from documentation: Don’t use [chunkhash] in development since this will increase compilation time
61+
// https://webpack.js.org/guides/caching/
62+
const FILE_PATTERN_DEVELOPMENT = '[name]';
63+
const FILE_PATTERN_PRODUCTION = '[name]-[chunkhash]';
64+
65+
let applicationBundleFilename = `${FILE_PATTERN_DEVELOPMENT}.js`;
66+
let cssBundleFilename = `${FILE_PATTERN_DEVELOPMENT}.css`;
67+
68+
const IS_PRODUCTION = env && env.production;
69+
70+
if (IS_PRODUCTION) {
71+
applicationBundleFilename = `${FILE_PATTERN_PRODUCTION}.js`;
72+
cssBundleFilename = `${FILE_PATTERN_PRODUCTION}.css`;
73+
}
74+
75+
let plugins = [
76+
new ExtractTextPlugin({
77+
filename: cssBundleFilename,
78+
disable: false,
79+
allChunks: true
80+
}),
81+
new Clean([DIST_PATH]),
82+
new HtmlWebpackPlugin({
83+
template: INDEX_HTML_TEMPLATE_ABSOLUTE_PATH
84+
})
85+
];
86+
87+
if (IS_PRODUCTION) {
88+
// don't use it in development to save time on recompile
89+
plugins = addVendorSplitting(plugins);
90+
plugins = addProductionPlugins(plugins);
4291
}
4392

4493
return {
4594
context: SRC_ABSOLUTE_PATH,
4695
entry: './entry',
4796
output: {
4897
path: DIST_ABSOLUTE_PATH,
49-
filename: APPLICATION_BUNDLE_FILENAME
98+
filename: applicationBundleFilename
5099
},
51100
module: {
52101
// loaders are loaded from bottom to top
@@ -70,7 +119,7 @@ module.exports = (env) => {
70119
include: SRC_ABSOLUTE_PATH, // other paths are ignored
71120
use: ExtractTextPlugin.extract({
72121
fallback: 'style-loader',
73-
use: 'css-loader?minimize!sass-loader'
122+
use: `css-loader${IS_PRODUCTION ? '?minimize' : ''}!sass-loader`
74123
})
75124
}, {
76125
test: /\.(jpe?g|png|gif|svg)$/,
@@ -90,13 +139,13 @@ module.exports = (env) => {
90139
contentBase: DIST_PATH,
91140
host: '0.0.0.0',
92141
// proxy requests to the backend
93-
// TODO: this setting doesn't work with "historyApiFallback: true"
142+
// TODO: this setting doesn't work with 'historyApiFallback: true'
94143
// proxy: {
95144
// '*': 'http://localhost'
96145
// },
97146

98147
// this setting is needed to support react-router
99-
// TODO: this setting doesn't work with "proxy"
148+
// TODO: this setting doesn't work with 'proxy'
100149
historyApiFallback: true
101150
}
102151
};

0 commit comments

Comments
(0)

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