Add webpack hot module reloading for development

Co-Authored-By: Tim Miller-Williams <timmw@users.noreply.github.com>
This commit is contained in:
Tim Miller-Williams 2019-11-07 20:19:54 +00:00 committed by Pavel Djundik
parent 8a224809dd
commit 19d8178606
7 changed files with 83 additions and 11 deletions

View File

@ -112,4 +112,4 @@ Before submitting any change, make sure to:
- Read the [Contributing instructions](https://github.com/thelounge/thelounge/blob/master/.github/CONTRIBUTING.md#contributing) - Read the [Contributing instructions](https://github.com/thelounge/thelounge/blob/master/.github/CONTRIBUTING.md#contributing)
- Run `yarn test` to execute linters and test suite - Run `yarn test` to execute linters and test suite
- Run `yarn build` if you change or add anything in `client/js` or `client/views` - Run `yarn build` if you change or add anything in `client/js` or `client/views`
- `yarn dev` can be used to start The Lounge and watch for any file changes in the client folder - `yarn dev` can be used to start The Lounge with hot module reloading

View File

@ -14,7 +14,7 @@
"scripts": { "scripts": {
"build": "webpack", "build": "webpack",
"coverage": "run-s test:{client,server} && nyc --nycrc-path=test/.nycrc-report.json report", "coverage": "run-s test:{client,server} && nyc --nycrc-path=test/.nycrc-report.json report",
"dev": "run-p watch start", "dev": "node index start --dev",
"format:prettier": "prettier --write \"**/*.*\"", "format:prettier": "prettier --write \"**/*.*\"",
"lint:check-eslint": "eslint --print-config .eslintrc.yml | eslint-config-prettier-check", "lint:check-eslint": "eslint --print-config .eslintrc.yml | eslint-config-prettier-check",
"lint:eslint": "eslint . --ext .js,.vue --report-unused-disable-directives --color", "lint:eslint": "eslint . --ext .js,.vue --report-unused-disable-directives --color",
@ -122,7 +122,9 @@
"vue-template-compiler": "2.6.10", "vue-template-compiler": "2.6.10",
"vuedraggable": "2.23.2", "vuedraggable": "2.23.2",
"webpack": "4.41.2", "webpack": "4.41.2",
"webpack-cli": "3.3.10" "webpack-cli": "3.3.10",
"webpack-dev-middleware": "3.7.2",
"webpack-hot-middleware": "2.25.0"
}, },
"husky": { "husky": {
"hooks": { "hooks": {

View File

@ -12,12 +12,13 @@ const Utils = require("./utils");
program program
.command("start") .command("start")
.description("Start the server") .description("Start the server")
.option("--dev", "Development mode with hot module reloading")
.on("--help", Utils.extraHelp) .on("--help", Utils.extraHelp)
.action(function() { .action(function(options) {
initalizeConfig(); initalizeConfig();
const server = require("../server"); const server = require("../server");
server(); server(options);
}); });
function initalizeConfig() { function initalizeConfig() {

28
src/plugins/dev-server.js Normal file
View File

@ -0,0 +1,28 @@
"use strict";
module.exports = (app) => {
const log = require("../log");
log.debug("Starting server in development mode");
const webpack = require("webpack");
const webpackConfig = require("../../webpack.config.js");
webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
webpackConfig.entry["js/bundle.js"].push(
"webpack-hot-middleware/client?path=storage/__webpack_hmr"
);
const compiler = webpack(webpackConfig);
app.use(
require("webpack-dev-middleware")(compiler, {
index: "/",
publicPath: webpackConfig.output.publicPath,
})
).use(
require("webpack-hot-middleware")(compiler, {
path: "/storage/__webpack_hmr",
})
);
};

View File

@ -32,7 +32,7 @@ const serverHash = Math.floor(Date.now() * Math.random());
let manager = null; let manager = null;
module.exports = function() { module.exports = function(options = {}) {
log.info(`The Lounge ${colors.green(Helper.getVersion())} \ log.info(`The Lounge ${colors.green(Helper.getVersion())} \
(Node.js ${colors.green(process.versions.node)} on ${colors.green(process.platform)} ${ (Node.js ${colors.green(process.versions.node)} on ${colors.green(process.platform)} ${
process.arch process.arch
@ -44,8 +44,13 @@ module.exports = function() {
maxAge: 86400 * 1000, maxAge: 86400 * 1000,
}; };
const app = express() const app = express();
.set("env", "production")
if (options.dev) {
require("./plugins/dev-server.js")(app);
}
app.set("env", "production")
.disable("x-powered-by") .disable("x-powered-by")
.use(allRequests) .use(allRequests)
.get("/", indexRequest) .get("/", indexRequest)

View File

@ -10,7 +10,7 @@ const Helper = require("./src/helper.js");
const config = { const config = {
mode: process.env.NODE_ENV === "production" ? "production" : "development", mode: process.env.NODE_ENV === "production" ? "production" : "development",
entry: { entry: {
"js/bundle.js": path.resolve(__dirname, "client/js/lounge.js"), "js/bundle.js": [path.resolve(__dirname, "client/js/lounge.js")],
"css/style": path.resolve(__dirname, "client/css/style.css"), "css/style": path.resolve(__dirname, "client/css/style.css"),
}, },
devtool: "source-map", devtool: "source-map",

View File

@ -1051,6 +1051,11 @@ ansi-escapes@^4.2.1:
dependencies: dependencies:
type-fest "^0.5.2" type-fest "^0.5.2"
ansi-html@0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
integrity sha1-gTWEAhliqenm/QOflA0S9WynhZ4=
ansi-regex@^2.0.0: ansi-regex@^2.0.0:
version "2.1.1" version "2.1.1"
resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df" resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@ -4038,6 +4043,11 @@ html-comment-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7" resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ== integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
html-entities@^1.2.0:
version "1.2.1"
resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
html-minifier-loader@1.4.1: html-minifier-loader@1.4.1:
version "1.4.1" version "1.4.1"
resolved "https://registry.yarnpkg.com/html-minifier-loader/-/html-minifier-loader-1.4.1.tgz#65f05e2a5f91f6b0713cc2081ae4ebe4bfc0d696" resolved "https://registry.yarnpkg.com/html-minifier-loader/-/html-minifier-loader-1.4.1.tgz#65f05e2a5f91f6b0713cc2081ae4ebe4bfc0d696"
@ -5397,6 +5407,11 @@ mime@1.6.0:
resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1" resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg== integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
mime@^2.4.4:
version "2.4.4"
resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
integrity sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==
mimic-fn@^2.0.0, mimic-fn@^2.1.0: mimic-fn@^2.0.0, mimic-fn@^2.1.0:
version "2.1.0" version "2.1.0"
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b" resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@ -7314,7 +7329,7 @@ querystring-es3@^0.2.0:
resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM= integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
querystring@0.2.0: querystring@0.2.0, querystring@^0.2.0:
version "0.2.0" version "0.2.0"
resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620" resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA= integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
@ -7339,7 +7354,7 @@ randomfill@^1.0.3:
randombytes "^2.0.5" randombytes "^2.0.5"
safe-buffer "^5.1.0" safe-buffer "^5.1.0"
range-parser@~1.2.1: range-parser@^1.2.1, range-parser@~1.2.1:
version "1.2.1" version "1.2.1"
resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031" resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg== integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
@ -9286,6 +9301,27 @@ webpack-cli@3.3.10:
v8-compile-cache "2.0.3" v8-compile-cache "2.0.3"
yargs "13.2.4" yargs "13.2.4"
webpack-dev-middleware@3.7.2:
version "3.7.2"
resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz#0019c3db716e3fa5cecbf64f2ab88a74bab331f3"
integrity sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==
dependencies:
memory-fs "^0.4.1"
mime "^2.4.4"
mkdirp "^0.5.1"
range-parser "^1.2.1"
webpack-log "^2.0.0"
webpack-hot-middleware@2.25.0:
version "2.25.0"
resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.25.0.tgz#4528a0a63ec37f8f8ef565cf9e534d57d09fe706"
integrity sha512-xs5dPOrGPCzuRXNi8F6rwhawWvQQkeli5Ro48PRuQh8pYPCPmNnltP9itiUPT4xI8oW+y0m59lyyeQk54s5VgA==
dependencies:
ansi-html "0.0.7"
html-entities "^1.2.0"
querystring "^0.2.0"
strip-ansi "^3.0.0"
webpack-log@^2.0.0: webpack-log@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f" resolved "https://registry.yarnpkg.com/webpack-log/-/webpack-log-2.0.0.tgz#5b7928e0637593f119d32f6227c1e0ac31e1b47f"