Skip to content

Commit 8c9ba05

Browse files
QWp6tQWp6t
committed
Reorganize and refactor build routine
1 parent c1bb2b3 commit 8c9ba05

File tree

8 files changed

+107
-94
lines changed

8 files changed

+107
-94
lines changed

‎assets/build/config.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,15 +21,14 @@ const config = mergeWithConcat({
2121
},
2222
enabled: {
2323
sourceMaps: !isProduction,
24-
minify: isProduction,
24+
optimize: isProduction,
2525
cacheBusting: isProduction,
2626
watcher: !!argv.watch,
27-
uglifyJs: !(argv.p || argv.optimizeMinimize),
2827
},
2928
watch: [],
3029
}, userConfig);
3130

32-
config.watch.push(config.copy);
31+
config.watch.push(`${path.basename(config.paths.assets)}/${config.copy}`);
3332
config.watch = uniq(config.watch);
3433

3534
Object.keys(config.entry).forEach(id =>

‎assets/build/util/assetManifestsFormatter.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const path = require('path');
2+
3+
module.exports = (key, value) => {
4+
if (typeof value === 'string') {
5+
return value;
6+
}
7+
const manifest = value;
8+
/**
9+
* Hack to prepend scripts/ or styles/ to manifest keys
10+
*
11+
* This might need to be reworked at some point.
12+
*
13+
* Before:
14+
* {
15+
* "main.js": "scripts/main_abcdef.js"
16+
* "main.css": "styles/main_abcdef.css"
17+
* }
18+
* After:
19+
* {
20+
* "scripts/main.js": "scripts/main_abcdef.js"
21+
* "styles/main.css": "styles/main_abcdef.css"
22+
* }
23+
*/
24+
Object.keys(manifest).forEach((src) => {
25+
const sourcePath = path.basename(path.dirname(src));
26+
const targetPath = path.basename(path.dirname(manifest[src]));
27+
if (sourcePath === targetPath) {
28+
return;
29+
}
30+
manifest[`${targetPath}/${src}`] = manifest[src];
31+
delete manifest[src];
32+
});
33+
return manifest;
34+
};

‎assets/build/webpack.config.js‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
1+
'use strict'; // eslint-disable-line
2+
13
const webpack = require('webpack');
24
const qs = require('qs');
35
const autoprefixer = require('autoprefixer');
46
const CleanPlugin = require('clean-webpack-plugin');
57
const ExtractTextPlugin = require('extract-text-webpack-plugin');
6-
const ImageminPlugin = require('imagemin-webpack-plugin').default;
7-
const imageminMozjpeg = require('imagemin-mozjpeg');
88

99
const CopyGlobsPlugin = require('./webpack.plugin.copyglobs');
1010
const mergeWithConcat = require('./util/mergeWithConcat');
11-
const addHotMiddleware = require('./util/addHotMiddleware');
12-
const webpackConfigProduction = require('./webpack.config.production');
13-
const webpackConfigWatch = require('./webpack.config.watch');
1411
const config = require('./config');
1512

1613
const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';
@@ -29,7 +26,7 @@ if (config.enabled.watcher) {
2926
jsLoader.loaders.unshift('monkey-hot?sourceType=module');
3027
}
3128

32-
const webpackConfig = {
29+
let webpackConfig = {
3330
context: config.paths.assets,
3431
entry: config.entry,
3532
devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
@@ -118,22 +115,17 @@ const webpackConfig = {
118115
jquery: 'jQuery',
119116
},
120117
plugins: [
121-
new CleanPlugin([config.paths.dist], config.paths.root),
118+
new CleanPlugin([config.paths.dist], {
119+
root: config.paths.root,
120+
verbose: false,
121+
}),
122122
new CopyGlobsPlugin({
123123
// It would be nice to switch to copy-webpack-plugin, but unfortunately it doesn't
124124
// provide a reliable way of tracking the before/after file names
125125
pattern: config.copy,
126126
output: `[path]${assetsFilenames}.[ext]`,
127127
manifest: config.manifest,
128128
}),
129-
new ImageminPlugin({
130-
optipng: { optimizationLevel: 7 },
131-
gifsicle: { optimizationLevel: 3 },
132-
pngquant: { quality: '65-90', speed: 4 },
133-
svgo: { removeUnknownsAndDefaults: false, cleanupIDs: false },
134-
plugins: [imageminMozjpeg({ quality: 75 })],
135-
disable: (config.enabled.watcher),
136-
}),
137129
new ExtractTextPlugin({
138130
filename: `styles/${assetsFilenames}.css`,
139131
allChunks: true,
@@ -152,7 +144,7 @@ const webpackConfig = {
152144
: false,
153145
}),
154146
new webpack.LoaderOptionsPlugin({
155-
minimize: config.enabled.minify,
147+
minimize: config.enabled.optimize,
156148
debug: config.enabled.watcher,
157149
stats: { colors: true },
158150
}),
@@ -175,21 +167,33 @@ const webpackConfig = {
175167
],
176168
};
177169

178-
module.exports = webpackConfig;
170+
/* eslint-disable global-require */ /** Let's only load dependencies as needed */
179171

180-
if (config.env.production) {
181-
module.exports = mergeWithConcat(webpackConfig, webpackConfigProduction);
172+
if (config.env.optimize) {
173+
webpackConfig = mergeWithConcat(webpackConfig, require('./webpack.config.optimize'));
182174
}
183175

184-
if (config.enabled.watcher) {
185-
module.exports.entry = addHotMiddleware(webpackConfig.entry);
186-
module.exports = mergeWithConcat(webpackConfig, webpackConfigWatch);
176+
if (config.env.production) {
177+
webpackConfig.plugins.push(new webpack.NoErrorsPlugin());
187178
}
188179

189-
if (config.enabled.uglifyJs) {
190-
module.exports.plugins.push(
191-
new webpack.optimize.UglifyJsPlugin({
192-
sourceMap: config.enabled.sourceMaps,
180+
if (config.enabled.cacheBusting) {
181+
const WebpackAssetsManifest = require('webpack-assets-manifest');
182+
183+
webpackConfig.plugins.push(
184+
new WebpackAssetsManifest({
185+
output: 'assets.json',
186+
space: 2,
187+
writeToDisk: false,
188+
assets: config.manifest,
189+
replacer: require('./util/assetManifestsFormatter'),
193190
})
194191
);
195192
}
193+
194+
if (config.enabled.watcher) {
195+
webpackConfig.entry = require('./util/addHotMiddleware')(webpackConfig.entry);
196+
webpackConfig = mergeWithConcat(webpackConfig, require('./webpack.config.watch'));
197+
}
198+
199+
module.exports = webpackConfig;

‎assets/build/webpack.config.optimize.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
'use strict'; // eslint-disable-line
2+
3+
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
4+
const ImageminPlugin = require('imagemin-webpack-plugin').default;
5+
const imageminMozjpeg = require('imagemin-mozjpeg');
6+
const cssnano = require('cssnano');
7+
8+
const config = require('./config');
9+
10+
module.exports = {
11+
plugins: [
12+
new OptimizeCssAssetsPlugin({
13+
cssProcessor: cssnano,
14+
cssProcessorOptions: { discardComments: { removeAll: true } },
15+
canPrint: true,
16+
}),
17+
new ImageminPlugin({
18+
optipng: { optimizationLevel: 7 },
19+
gifsicle: { optimizationLevel: 3 },
20+
pngquant: { quality: '65-90', speed: 4 },
21+
svgo: { removeUnknownsAndDefaults: false, cleanupIDs: false },
22+
plugins: [imageminMozjpeg({ quality: 75 })],
23+
disable: (config.enabled.watcher),
24+
}),
25+
],
26+
};

‎assets/build/webpack.config.production.js‎

Lines changed: 0 additions & 56 deletions
This file was deleted.

‎assets/build/webpack.config.watch.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
const webpack = require('webpack');
22
const BrowserSyncPlugin = require('./webpack.plugin.browsersync');
3-
const mergeWithConcat = require('./util/mergeWithConcat');
43

54
const config = require('./config');
65

76
module.exports = {
87
output: { pathinfo: true },
98
devtool: '#cheap-module-source-map',
9+
stats: false,
1010
plugins: [
1111
new webpack.optimize.OccurrenceOrderPlugin(),
1212
new webpack.HotModuleReplacementPlugin(),
@@ -15,9 +15,7 @@ module.exports = {
1515
target: config.devUrl,
1616
publicPath: config.publicPath,
1717
proxyUrl: config.proxyUrl,
18-
browserSyncOptions: mergeWithConcat({
19-
files: config.watch,
20-
}, config.browserSyncOptions),
18+
watch: config.watch,
2119
}),
2220
],
2321
};

‎assets/build/webpack.plugin.browsersync.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const webpackDevMiddleware = require('webpack-dev-middleware');
44
const webpackHotMiddleware = require('webpack-hot-middleware');
55
const browserSync = require('browser-sync');
66
const url = require('url');
7+
const uniq = require('lodash/uniq');
78

89
const mergeWithConcat = require('./util/mergeWithConcat');
910

@@ -13,6 +14,7 @@ module.exports = class {
1314
this.compiler = null;
1415
this.options = mergeWithConcat({
1516
proxyUrl: 'https://localhost:3000',
17+
watch: [],
1618
callback() {},
1719
}, options);
1820
}
@@ -27,7 +29,9 @@ module.exports = class {
2729
compiler.plugin('compilation', () => this.watcher.notify('Rebuilding...'));
2830
this.start();
2931
}
30-
// Optionally add logic for this.watcher.reload()
32+
/* You may optionally add custom logic here to trigger either of the following */
33+
// this.watcher.reload()
34+
// this.watcher.reload({ stream: true })
3135
});
3236
}
3337
start() {
@@ -38,13 +42,16 @@ module.exports = class {
3842
target: this.options.target,
3943
middleware: this.middleware(),
4044
},
45+
files: [],
4146
}, this.options.browserSyncOptions);
47+
watcherConfig.files = uniq(watcherConfig.files.concat(this.options.watch));
4248
this.watcher.init(watcherConfig, this.options.callback.bind(this));
4349
}
4450
middleware() {
4551
this.webpackDevMiddleware = webpackDevMiddleware(this.compiler, {
4652
publicPath: this.options.publicPath,
47-
stats: { colors: true },
53+
stats: false,
54+
noInfo: true,
4855
});
4956
this.webpackHotMiddleware = webpackHotMiddleware(this.compiler, {
5057
log: this.watcher.notify.bind(this.watcher),

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,12 @@
1919
],
2020
"scripts": {
2121
"build": "webpack --progress --config assets/build/webpack.config.js",
22-
"build:production": "npm run build -s -- -p",
23-
"start": "npm run build -s -- --watch",
22+
"build:production": "webpack --progress -p --config assets/build/webpack.config.js",
23+
"build:profile": "webpack --progress --profile --json --config assets/build/webpack.config.js",
24+
"start": "webpack --hide-modules --watch --config assets/build/webpack.config.js",
2425
"clean": "rimraf dist",
2526
"lint": "eslint assets/scripts assets/build",
26-
"test": "npm run lint -s"
27+
"test": "npm run lint"
2728
},
2829
"engines": {
2930
"node": ">= 4.5"

0 commit comments

Comments
 (0)