Skip to content

Commit

Permalink
Fix webpack HMR
Browse files Browse the repository at this point in the history
  • Loading branch information
QWp6t committed Sep 11, 2016
1 parent 3516629 commit 10899cf
Show file tree
Hide file tree
Showing 11 changed files with 154 additions and 53 deletions.
6 changes: 5 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
### 9.0.0-alpha.3: September 11th, 2016
* Fix webpack HMR ([#1713](https://github.com/roots/sage/issues/1713))
* Remove minor edits from CHANGELOG.md ([3516629](https://github.com/roots/sage/commit/3516629))

### 9.0.0-alpha.2: September 4th, 2016
* Refactor build routine ([#1703](https://github.com/roots/sage/pull/1703))
* Update `_grid.scss` to use `@include make-col-ready()` mixin ([#1706](https://github.com/roots/sage/pull/1706))
Expand All @@ -16,7 +20,7 @@
* Refactor functions.php ([eae36be](https://github.com/roots/sage/commit/eae36be))
* Rework template wrapper, bring back template_part() ([#1678](https://github.com/roots/sage/pull/1678))
* Remove unused static variable in Wrapper ([9bfdd5a](https://github.com/roots/sage/commit/9bfdd5a))
* Remove path.extname() check ([#1673](https://github.com/roots/sage/pull/1673))
* Remove `path.extname()` check ([#1673](https://github.com/roots/sage/pull/1673))
* Updated to align with the Bootstrap 4 docs ([#1667](https://github.com/roots/sage/pull/1667))
* Add `npm prune` to Travis CI ([#1663](https://github.com/roots/sage/pull/1663))
* Bootstrap NPM ^4.0.0-alpha.2 ([#1650](https://github.com/roots/sage/pull/1650))
Expand Down
18 changes: 16 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,8 @@ You now have all the necessary dependencies to run the build process.

### Build commands

* `npm start` — Compile assets when file changes are made, start BrowserSync session
* `npm run build` — Compile and optimize the files in your assets directory
* `npm run start` — Compile assets when file changes are made, start BrowserSync session
* `npm run build:production` — Compile assets for production

#### Additional commands
Expand All @@ -98,7 +98,7 @@ You now have all the necessary dependencies to run the build process.

### Using BrowserSync

To use BrowserSync during `npm run start` you need to update `devUrl` at the bottom of `assets/config.json` to reflect your local development hostname.
To use BrowserSync during `npm start` you need to update `devUrl` at the bottom of `assets/config.json` to reflect your local development hostname.

If your local development URL is `https://project-name.dev`, update the file to read:
```json
Expand All @@ -115,6 +115,20 @@ If you are not using [Bedrock](https://roots.io/bedrock/), update `publicPath` t
...
```

By default, BrowserSync will use webpack's [HMR](https://webpack.github.io/docs/hot-module-replacement.html), which won't trigger a page reload in your browser.

If you would like to force BrowserSync to reload the page whenever certain file types are edited, then add them to `watch` in `assets/config.json`.

```json
...
"watch": [
"assets/scripts/**/*.js",
"templates/**/*.php",
"src/**/*.php"
],
...
```

## Documentation

Sage 8 documentation is available at [https://roots.io/sage/docs/](https://roots.io/sage/docs/).
Expand Down
1 change: 1 addition & 0 deletions assets/build/config.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,5 @@ module.exports = mergeWithConcat(config, {
.map(file => path.join(config.paths.assets, file));
},
},
publicPath: `${config.publicPath}/${path.basename(config.paths.dist)}/`,
});
21 changes: 21 additions & 0 deletions assets/build/util/addHotMiddleware.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
const qs = require('qs');

/**
* Loop through webpack entry
* and add the hot middleware
* @param {Object} entry webpack entry
* @return {Object} entry with hot middleware
*/
module.exports = (entry) => {
const results = {};
const hotMiddlewareScript = `webpack-hot-middleware/client?${qs.stringify({
timeout: 20000,
reload: false,
})}`;

Object.keys(entry).forEach(name => {
results[name] = Array.isArray(entry[name]) ? entry[name].slice(0) : [entry[name]];
results[name].push(hotMiddlewareScript);
});
return results;
};
18 changes: 18 additions & 0 deletions assets/build/util/assetsPluginProcessOutput.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
const path = require('path');

/**
* Process AssetsPlugin output and format it
* for Sage: {"[name].[ext]":"[name]_[hash].[ext]"}
* @param {Object} assets passed by processOutput
* @return {String} JSON
*/
module.exports = (assets) => {
const results = {};
Object.keys(assets).forEach(name => {
Object.keys(assets[name]).forEach(ext => {
const filename = `${path.dirname(assets[name][ext])}/${path.basename(`${name}.${ext}`)}`;
results[filename] = assets[name][ext];
});
});
return JSON.stringify(results);
};
29 changes: 13 additions & 16 deletions assets/build/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,22 +8,28 @@ const ImageminPlugin = require('imagemin-webpack-plugin').default;
const imageminMozjpeg = require('imagemin-mozjpeg');

const mergeWithConcat = require('./util/mergeWithConcat');
const addHotMiddleware = require('./util/addHotMiddleware');
const webpackConfigProduction = require('./webpack.config.production');
const webpackConfigWatch = require('./webpack.config.watch');
const config = require('./config');

const publicPath = `${config.publicPath}/${path.basename(config.paths.dist)}/`;
const assetsFilenames = (config.enabled.cacheBusting) ? config.cacheBusting : '[name]';
const sourceMapQueryStr = (config.enabled.sourceMaps) ? '+sourceMap' : '-sourceMap';

const jsLoader = {
test: /\.js$/,
exclude: [/(node_modules|bower_components)(?![/|\\](bootstrap|foundation-sites))/],
loaders: [`babel?presets[]=${path.resolve('./node_modules/babel-preset-es2015')}&cacheDirectory`],
loaders: [{
loader: 'babel',
query: {
presets: [[path.resolve('./node_modules/babel-preset-es2015'), { modules: false }]],
cacheDirectory: true,
},
}],
};

if (config.enabled.watcher) {
jsLoader.loaders.unshift('monkey-hot');
jsLoader.loaders.unshift('monkey-hot?sourceType=module');
}

const webpackConfig = {
Expand All @@ -32,7 +38,7 @@ const webpackConfig = {
devtool: (config.enabled.sourceMaps ? '#source-map' : undefined),
output: {
path: config.paths.dist,
publicPath,
publicPath: config.publicPath,
filename: `scripts/${assetsFilenames}.js`,
},
module: {
Expand Down Expand Up @@ -148,11 +154,6 @@ const webpackConfig = {
Tether: 'tether',
'window.Tether': 'tether',
}),
new webpack.DefinePlugin({
WEBPACK_PUBLIC_PATH: (config.enabled.watcher)
? JSON.stringify(publicPath)
: false,
}),
new webpack.LoaderOptionsPlugin({
minimize: config.enabled.minify,
debug: config.enabled.watcher,
Expand Down Expand Up @@ -181,19 +182,15 @@ if (config.env.production) {
}

if (config.enabled.watcher) {
module.exports = mergeWithConcat(webpackConfig, webpackConfigWatch);
module.exports = mergeWithConcat(webpackConfig, webpackConfigWatch, {
entry: addHotMiddleware(webpackConfig.entry),
});
}

if (config.enabled.uglifyJs) {
module.exports.plugins.push(
new webpack.optimize.UglifyJsPlugin({
compress: config.enabled.minify ? {
drop_debugger: true,
dead_code: true,
warnings: false,
} : false,
sourceMap: config.enabled.sourceMaps,
output: { comments: false },
})
);
}
21 changes: 2 additions & 19 deletions assets/build/webpack.config.production.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,17 @@
const AssetsPlugin = require('assets-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const cssnano = require('cssnano');
const path = require('path');

const processOutput = require('./util/assetsPluginProcessOutput');
const config = require('./config');

/**
* Process AssetsPlugin output and format it
* for Sage: {"[name].[ext]":"[name]_[hash].[ext]"}
* @param {Object} assets passed by processOutput
* @return {String} JSON
*/
const assetsPluginProcessOutput = (assets) => {
const results = {};
Object.keys(assets).forEach(name => {
Object.keys(assets[name]).forEach(ext => {
const filename = `${path.dirname(assets[name][ext])}/${path.basename(`${name}.${ext}`)}`;
results[filename] = assets[name][ext];
});
});
return JSON.stringify(results);
};

module.exports = {
plugins: [
new AssetsPlugin({
path: config.paths.dist,
filename: 'assets.json',
fullPath: false,
processOutput: assetsPluginProcessOutput,
processOutput,
}),
new OptimizeCssAssetsPlugin({
cssProcessor: cssnano,
Expand Down
23 changes: 13 additions & 10 deletions assets/build/webpack.config.watch.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const url = require('url');
const webpack = require('webpack');
const BrowserSyncPlugin = require('./webpack.plugin.browsersync');

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

module.exports = {
output: { pathinfo: true },
debug: true,
devTool: 'cheap-module-source-map',
devtool: '#cheap-module-source-map',
plugins: [
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
WEBPACK_PUBLIC_PATH: JSON.stringify(config.publicPath),
}),
new BrowserSyncPlugin({
host: url.parse(config.proxyUrl).hostname,
port: url.parse(config.proxyUrl).port,
proxy: config.devUrl,
files: [
'templates/**/*.php',
'src/**/*.php',
],
target: config.devUrl,
publicPath: config.publicPath,
proxyUrl: config.proxyUrl,
browserSyncOptions: { files: config.watch },
}),
],
};
55 changes: 55 additions & 0 deletions assets/build/webpack.plugin.browsersync.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
'use strict'; // eslint-disable-line strict

const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const browserSync = require('browser-sync');
const url = require('url');

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

module.exports = class {
constructor(options) {
this.watcher = null;
this.compiler = null;
this.options = mergeWithConcat({
proxyUrl: 'https://localhost:3000',
callback() {},
}, options);
}
apply(compiler) {
if (this.options.disable) {
return;
}
this.compiler = compiler;
compiler.plugin('done', this.doneCompiling);
}
doneCompiling() {
if (!this.watcher) {
this.watcher = browserSync.create();
this.compiler.plugin('compilation', () => this.watcher.notify('Rebuilding...'));
this.start();
}
// Optionally add logic for this.watcher.reload()
}
start() {
const watcherConfig = mergeWithConcat({
host: url.parse(this.options.proxyUrl).hostname,
port: url.parse(this.options.proxyUrl).port,
proxy: {
target: this.options.target,
middleware: this.middleware(),
},
}, this.options.browserSyncOptions);
this.watcher.init(watcherConfig, this.options.callback.bind(this));
}
middleware() {
this.webpackDevMiddleware = webpackDevMiddleware(this.compiler, {
publicPath: this.options.publicPath,
stats: { colors: true },
});
this.webpackHotMiddleware = webpackHotMiddleware(this.compiler, {
log: this.watcher.notify.bind(this.watcher),
});
return [this.webpackDevMiddleware, this.webpackHotMiddleware];
}
};
4 changes: 4 additions & 0 deletions assets/config.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@
"./scripts/customizer.js"
]
},
"watch": [
"templates/**/*.php",
"src/**/*.php"
],
"publicPath": "/app/themes/sage",
"devUrl": "https://example.dev",
"proxyUrl": "https://localhost:3000",
Expand Down
11 changes: 6 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,16 +35,15 @@
"babel-core": "^6.14.0",
"babel-eslint": "^6.1.2",
"babel-loader": "^6.2.5",
"babel-preset-es2015-webpack": "^6.4.3",
"babel-preset-es2015": "^6.14.0",
"babel-register": "^6.14.0",
"babel-runtime": "^6.11.6",
"body-parser": "^1.15.2",
"browser-sync": "^2.15.0",
"browser-sync-webpack-plugin": "^1.1.2",
"clean-webpack-plugin": "^0.1.10",
"css-loader": "^0.25.0",
"cssnano": "^3.7.4",
"eslint": "^3.4.0",
"eslint": "^3.5.0",
"eslint-config-airbnb": "^11.0.0",
"eslint-config-airbnb-es5": "^1.0.9",
"eslint-loader": "^1.5.0",
Expand All @@ -59,7 +58,7 @@
"imports-loader": "^0.6.5",
"lodash": "^4.15.0",
"minimist": "^1.2.0",
"monkey-hot-loader": "0.0.3",
"monkey-hot-loader": "github:rmarscher/monkey-hot-loader#webpack2-import",
"node-sass": "^3.9.3",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"postcss": "^5.2.0",
Expand All @@ -70,7 +69,9 @@
"sass-loader": "^4.0.2",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^2.1.0-beta.22"
"webpack": "^2.1.0-beta.22",
"webpack-dev-middleware": "^1.7.0",
"webpack-hot-middleware": "^2.12.2"
},
"dependencies": {
"bootstrap": "github:twbs/bootstrap#v4-dev",
Expand Down

0 comments on commit 10899cf

Please sign in to comment.