Add full HMR support for client

This commit is contained in:
Shawn 2018-12-14 11:17:28 -06:00
parent 749abb80d5
commit 6c91fcc95d
4 changed files with 76 additions and 9 deletions

66
package-lock.json generated
View file

@ -1465,6 +1465,12 @@
"resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-3.1.0.tgz",
"integrity": "sha512-UgAb8H9D41AQnu/PbWlCofQVcnV4Gs2bBJi9eZPxfU/hgglFh3SMDMENRIqdr7H6XFnXdoknctFByVsCOotTVw=="
},
"ansi-html": {
"version": "0.0.7",
"resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
"integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4=",
"dev": true
},
"ansi-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
@ -6529,6 +6535,12 @@
"resolved": "https://registry.npmjs.org/hsts/-/hsts-2.1.0.tgz",
"integrity": "sha512-zXhh/DqgrTXJ7erTN6Fh5k/xjMhDGXCqdYN3wvxUvGUQvnxcFfUd8E+6vLg/nk3ss1TYMb+DhRl25fYABioTvA=="
},
"html-entities": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz",
"integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=",
"dev": true
},
"http-errors": {
"version": "1.6.3",
"resolved": "http://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
@ -9570,10 +9582,32 @@
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
"integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
"dev": true,
"requires": {
"ajv": "^6.5.5",
"har-schema": "^2.0.0"
},
"dependencies": {
"ajv": {
"version": "6.6.1",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.6.1.tgz",
"integrity": "sha512-ZoJjft5B+EJBjUyu9C9Hc0OZyPZSSlOF+plzouTrg6UlA8f+e/n8NIgBFG/9tppJtpPWfthHakK7juJdNDODww==",
"requires": {
"fast-deep-equal": "^2.0.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
"fast-deep-equal": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
"integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
},
"json-schema-traverse": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
}
}
},
"has-flag": {
@ -14993,7 +15027,6 @@
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.3.tgz",
"integrity": "sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g==",
"dev": true,
"requires": {
"ajv": "^6.5.5",
"har-schema": "^2.0.0"
@ -15644,6 +15677,35 @@
}
}
},
"webpack-hot-middleware": {
"version": "2.24.3",
"resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.24.3.tgz",
"integrity": "sha512-pPlmcdoR2Fn6UhYjAhp1g/IJy1Yc9hD+T6O9mjRcWV2pFbBjIFoJXhP0CoD0xPOhWJuWXuZXGBga9ybbOdzXpg==",
"dev": true,
"requires": {
"ansi-html": "0.0.7",
"html-entities": "^1.2.0",
"querystring": "^0.2.0",
"strip-ansi": "^3.0.0"
},
"dependencies": {
"ansi-regex": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
"dev": true
},
"strip-ansi": {
"version": "3.0.1",
"resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"dev": true,
"requires": {
"ansi-regex": "^2.0.0"
}
}
}
},
"webpack-log": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz",

View file

@ -122,6 +122,7 @@
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-middleware": "^3.4.0",
"webpack-hot-middleware": "^2.24.3",
"webpack-node-externals": "^1.7.2"
},
"husky": {

View file

@ -50,17 +50,13 @@ function Server () {
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackClientConfig = require('../webpack/webpack.client.config')(null, { mode: 'development' });
const clientCompilerConfig = Object.assign({}, webpackClientConfig, {
mode: 'development',
});
console.log(clientCompilerConfig)
const clientCompiler = webpack(webpackClientConfig);
app.use(webpackDevMiddleware(clientCompiler, {
publicPath: webpackClientConfig.output.publicPath,
}));
app.use(require('webpack-hot-middleware')(clientCompiler));
}
// trust the proxy to get ip address for us

View file

@ -14,8 +14,15 @@ module.exports = (env, argv) => {
const isDev = argv.mode === 'development';
return {
mode: isDev ? 'development' : 'production',
target: 'web',
entry : ['@babel/polyfill', 'whatwg-fetch', './client/src/index.js'],
entry : [
'webpack-hot-middleware/client',
//'webpack/hot/dev-server',
'@babel/polyfill',
'whatwg-fetch',
'./client/src/index.js',
],
output: {
path : Path.resolve(__dirname, '../public/bundle'),
publicPath: '/bundle/',
@ -66,6 +73,7 @@ module.exports = (env, argv) => {
extensions: ['.js', '.jsx', '.scss', '.json'],
},
plugins: [
...(isDev ? [new webpack.HotModuleReplacementPlugin()] : []),
new ExtractCssChunks({
filename: 'style.css', // '[name].css',
})