From f9e237da09e433f65fca6131a08179439e5eaa62 Mon Sep 17 00:00:00 2001 From: Joe Fleming Date: Sun, 22 Jan 2017 12:02:04 -0700 Subject: [PATCH] turn webpack middleware into middleware fix HMR middleware, and some loopback boilerplate cleanup --- README.md | 3 --- server/boot/webpack-dev.js | 25 ------------------------- server/boot/webpack-hmr.js | 13 ------------- server/config/webpack.base.js | 2 +- server/config/webpack.dev.js | 4 ++++ server/config/webpack.prod.js | 15 ++++++++++++--- server/middleware.development.json | 8 ++++++++ server/middleware.json | 7 ++++--- server/middleware/helpers/webpack.js | 9 +++++++++ server/middleware/webpack-dev.js | 23 +++++++++++++++++++++++ server/middleware/webpack-hmr.js | 12 ++++++++++++ server/server.js | 13 +------------ src/main.js | 2 +- 13 files changed, 75 insertions(+), 61 deletions(-) delete mode 100644 README.md delete mode 100644 server/boot/webpack-dev.js delete mode 100644 server/boot/webpack-hmr.js create mode 100644 server/middleware/helpers/webpack.js create mode 100644 server/middleware/webpack-dev.js create mode 100644 server/middleware/webpack-hmr.js diff --git a/README.md b/README.md deleted file mode 100644 index 866baed..0000000 --- a/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# My Application - -The project is generated by [LoopBack](http://loopback.io). \ No newline at end of file diff --git a/server/boot/webpack-dev.js b/server/boot/webpack-dev.js deleted file mode 100644 index 2f5f374..0000000 --- a/server/boot/webpack-dev.js +++ /dev/null @@ -1,25 +0,0 @@ -const webpack = require('webpack'); -const webpackMiddleware = require('webpack-dev-middleware'); -const config = require('../config/webpack.dev'); - -const isProduction = (process.env.NODE_ENV === 'production'); - -module.exports = (app) => { - if (isProduction) return; - - const compiler = webpack(config); - const middleware = webpackMiddleware(compiler, { - publicPath: config.output.publicPath, - contentBase: 'src', - stats: { - colors: true, - hash: false, - timings: true, - chunks: false, - chunkModules: false, - modules: false, - }, - }); - - app.use(middleware); -}; diff --git a/server/boot/webpack-hmr.js b/server/boot/webpack-hmr.js deleted file mode 100644 index fcc9e97..0000000 --- a/server/boot/webpack-hmr.js +++ /dev/null @@ -1,13 +0,0 @@ -const webpack = require('webpack'); -const webpackHotMiddleware = require('webpack-hot-middleware'); -const config = require('../config/webpack.dev'); - -const isProduction = (process.env.NODE_ENV === 'production'); - -module.exports = (app) => { - if (isProduction) return; - - const compiler = webpack(config); - - app.use(webpackHotMiddleware(compiler)); -}; diff --git a/server/config/webpack.base.js b/server/config/webpack.base.js index 8538207..978e613 100644 --- a/server/config/webpack.base.js +++ b/server/config/webpack.base.js @@ -3,7 +3,7 @@ const path = require('path'); const ROOT = path.resolve(__dirname, '..', '..'); module.exports = { - entry: `${ROOT}/src/main.js`, + entry: [`${ROOT}/src/main.js`], output: { path: `${ROOT}/client`, publicPath: '/', diff --git a/server/config/webpack.dev.js b/server/config/webpack.dev.js index 64b2a10..be6bdf5 100644 --- a/server/config/webpack.dev.js +++ b/server/config/webpack.dev.js @@ -7,7 +7,9 @@ const baseConfig = require('./webpack.base'); const ROOT = path.resolve(__dirname, '..', '..'); module.exports = merge(baseConfig, { + entry: ['webpack-hot-middleware/client'], plugins: [ + // http://vue-loader.vuejs.org/en/workflow/production.html new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"development"', @@ -23,5 +25,7 @@ module.exports = merge(baseConfig, { // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency', }), + + new webpack.HotModuleReplacementPlugin(), ], }); diff --git a/server/config/webpack.prod.js b/server/config/webpack.prod.js index 200829d..c09a844 100644 --- a/server/config/webpack.prod.js +++ b/server/config/webpack.prod.js @@ -13,21 +13,26 @@ module.exports = merge(baseConfig, { }, // add sourcemaps to production build devtool: '#source-map', - // http://vue-loader.vuejs.org/en/workflow/production.html plugins: [ + // http://vue-loader.vuejs.org/en/workflow/production.html new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"', }, }), + new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, }, }), + new webpack.LoaderOptionsPlugin({ minimize: true, }), + + // let webpack generate all your favicons and icons for you + // https://github.com/jantimon/favicons-webpack-plugin new FaviconsWebpackPlugin({ logo: path.join(ROOT, 'src', 'assets', 'logo.png'), persistentCache: false, @@ -45,6 +50,7 @@ module.exports = merge(baseConfig, { windows: false, }, }), + // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html // see https://github.com/ampedandwired/html-webpack-plugin @@ -60,7 +66,9 @@ module.exports = merge(baseConfig, { // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency', }), + // split vendor js into its own file + // prevents hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks(module) { @@ -73,8 +81,9 @@ module.exports = merge(baseConfig, { ); }, }), - // extract webpack runtime and module manifest to its own file in order to - // prevent vendor hash from being updated whenever app bundle is updated + + // extract webpack runtime and module manifest into its own file + // prevents hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['vendor'], diff --git a/server/middleware.development.json b/server/middleware.development.json index 071c11a..d898ff3 100644 --- a/server/middleware.development.json +++ b/server/middleware.development.json @@ -1,4 +1,12 @@ { + "routes:before": { + "./middleware/webpack-dev": { + "params": { "enabled": true } + }, + "./middleware/webpack-hmr": { + "params": { "enabled": true } + } + }, "final:after": { "strong-error-handler": { "params": { diff --git a/server/middleware.json b/server/middleware.json index 1e571c5..e3d7a20 100644 --- a/server/middleware.json +++ b/server/middleware.json @@ -1,7 +1,4 @@ { - "initial:before": { - "loopback#favicon": {} - }, "initial": { "compression": {}, "cors": { @@ -33,6 +30,10 @@ "session": {}, "auth": {}, "parse": {}, + "routes:before": { + "./middleware/webpack-dev": {}, + "./middleware/webpack-hmr": {} + }, "routes": { "loopback#rest": { "paths": [ diff --git a/server/middleware/helpers/webpack.js b/server/middleware/helpers/webpack.js new file mode 100644 index 0000000..8c69198 --- /dev/null +++ b/server/middleware/helpers/webpack.js @@ -0,0 +1,9 @@ +const webpack = require('webpack'); +const config = require('../../config/webpack.dev'); + +const compiler = webpack(config); + +module.exports = { + compiler, + config, +}; diff --git a/server/middleware/webpack-dev.js b/server/middleware/webpack-dev.js new file mode 100644 index 0000000..b3b9df1 --- /dev/null +++ b/server/middleware/webpack-dev.js @@ -0,0 +1,23 @@ +const webpackMiddleware = require('webpack-dev-middleware'); +const webpack = require('./helpers/webpack'); + +const isProduction = (process.env.NODE_ENV === 'production'); + +module.exports = (params) => { + if (isProduction || params.enabled !== true) return (req, res, next) => next(); + + const middleware = webpackMiddleware(webpack.compiler, { + publicPath: webpack.config.output.publicPath, + contentBase: 'src', + stats: { + colors: true, + hash: false, + timings: true, + chunks: false, + chunkModules: false, + modules: false, + }, + }); + + return (req, res, next) => middleware(req, res, next); +}; diff --git a/server/middleware/webpack-hmr.js b/server/middleware/webpack-hmr.js new file mode 100644 index 0000000..29e158e --- /dev/null +++ b/server/middleware/webpack-hmr.js @@ -0,0 +1,12 @@ +const webpackHotMiddleware = require('webpack-hot-middleware'); +const webpack = require('./helpers/webpack'); + +const isProduction = (process.env.NODE_ENV === 'production'); + +module.exports = (params) => { + if (isProduction || params.enabled !== true) return (req, res, next) => next(); + + const middleware = webpackHotMiddleware(webpack.compiler); + + return (req, res, next) => middleware(req, res, next); +}; diff --git a/server/server.js b/server/server.js index aa99574..27d3745 100644 --- a/server/server.js +++ b/server/server.js @@ -1,20 +1,9 @@ /* eslint-disable no-console */ -const path = require('path'); const loopback = require('loopback'); const boot = require('loopback-boot'); const app = module.exports = loopback(); -const bootOptions = { - appRootDir: path.resolve(__dirname), - bootScripts: [ - 'boot/authentication.js', - 'boot/webpack-dev.js', - 'boot/webpack-hmr.js', - 'boot/root.js', - ], -}; - // start the webserver app.start = () => app.listen(() => { app.emit('started'); @@ -30,7 +19,7 @@ app.start = () => app.listen(() => { // Bootstrap the application, configure models, datasources and middleware. // Sub-apps like REST API are mounted via boot scripts. -boot(app, bootOptions, (err) => { +boot(app, __dirname, (err) => { if (err) throw err; // start the server if `$ node server.js` diff --git a/src/main.js b/src/main.js index 0f43b1b..0250421 100644 --- a/src/main.js +++ b/src/main.js @@ -1,3 +1,3 @@ /* eslint-env browser */ -document.querySelector('#app').innerHTML = 'Hello from main.js!'; +document.querySelector('#app').innerHTML = 'Hello, from main.js!';