Use webpack-dev-server instead of http-server

Advantages:
 * blocks while a rebuild is in progress so you're less likely to reload the
   old version

 * serves from memory rather than disk, so we no longer need to turn off the
   cachebuster to avoid filling the disk with bundles. Empirically, seems to
   last a plausible amount of time without OOMing; there's no real reason to
   believe it would use any more memory than webpack itself.

 * That in turn means we no longer need the hack to stop chrome caching old
   sourcemaps (because the sourcemap now has a cachebuster in its name).

 * one fewer process for parallelshell to (fail to) manage.

 * in future, we could consider the fancy hot-reload functionality.
This commit is contained in:
Richard van der Hoff 2016-11-03 14:58:30 +00:00
parent 4dab36d3b2
commit ff462580b0
2 changed files with 15 additions and 19 deletions

View file

@ -35,12 +35,11 @@
"build:dev": "npm run build:emojione && npm run build:css && npm run build:bundle:dev", "build:dev": "npm run build:emojione && npm run build:css && npm run build:bundle:dev",
"dist": "scripts/package.sh", "dist": "scripts/package.sh",
"start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/ -w", "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/ -w",
"start:js": "webpack -w --progress --no-cache-buster", "start:js": "webpack-dev-server -w --progress",
"start:js:prod": "NODE_ENV=production webpack -w --progress --no-cache-buster", "start:js:prod": "NODE_ENV=production webpack-dev-server -w --progress",
"start:skins:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css", "start:skins:css": "mkdirp build && catw \"src/skins/vector/css/**/*.css\" -o build/components.css",
"//cache": "Note the -c 1 below due to https://code.google.com/p/chromium/issues/detail?id=508270", "start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:js\" \"npm run start:skins:css\"",
"start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"", "start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\"",
"start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
"clean": "rimraf build lib vector/olm.* vector/bundle.* vector/emojione vector/index.html", "clean": "rimraf build lib vector/olm.* vector/bundle.* vector/emojione vector/index.html",
"prepublish": "npm run build:compile", "prepublish": "npm run build:compile",
"test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false", "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
@ -95,7 +94,6 @@
"expect": "^1.16.0", "expect": "^1.16.0",
"fs-extra": "^0.30.0", "fs-extra": "^0.30.0",
"html-webpack-plugin": "^2.24.0", "html-webpack-plugin": "^2.24.0",
"http-server": "^0.8.4",
"json-loader": "^0.5.3", "json-loader": "^0.5.3",
"karma": "^0.13.22", "karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3", "karma-chrome-launcher": "^0.2.3",
@ -113,7 +111,8 @@
"react-addons-test-utils": "^15.0.1", "react-addons-test-utils": "^15.0.1",
"rimraf": "^2.4.3", "rimraf": "^2.4.3",
"source-map-loader": "^0.1.5", "source-map-loader": "^0.1.5",
"webpack": "^1.12.14" "webpack": "^1.12.14",
"webpack-dev-server": "^1.16.2"
}, },
"optionalDependencies": { "optionalDependencies": {
"olm": "https://matrix.org/packages/npm/olm/olm-2.0.0.tgz" "olm": "https://matrix.org/packages/npm/olm/olm-2.0.0.tgz"

View file

@ -3,15 +3,6 @@ var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin"); var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin');
var cachebuster = true;
for (var i=0; i < process.argv.length; i++) {
var arg = process.argv[i];
if (arg == "--no-cache-buster") {
cachebuster = false;
}
}
module.exports = { module.exports = {
entry: { entry: {
"bundle": "./src/vector/index.js", "bundle": "./src/vector/index.js",
@ -49,7 +40,7 @@ module.exports = {
}, },
output: { output: {
path: path.join(__dirname, "vector"), path: path.join(__dirname, "vector"),
filename: "[name]" + (cachebuster ? ".[chunkhash]" : "") + ".js", filename: "[name].[chunkhash].js",
devtoolModuleFilenameTemplate: function(info) { devtoolModuleFilenameTemplate: function(info) {
// Reading input source maps gives only relative paths here for // Reading input source maps gives only relative paths here for
// everything. Until I figure out how to fix this, this is a // everything. Until I figure out how to fix this, this is a
@ -84,7 +75,7 @@ module.exports = {
}), }),
new ExtractTextPlugin( new ExtractTextPlugin(
"[name]" + (cachebuster ? ".[contenthash]" : "") + ".css", "[name].[contenthash].css",
{ {
allChunks: true allChunks: true
} }
@ -100,7 +91,13 @@ module.exports = {
inject: false, inject: false,
}), }),
], ],
devtool: 'source-map' devtool: 'source-map',
// configuration for the webpack-dev-server
devServer: {
// serve unwebpacked assets from vector.
contentBase: './vector',
},
}; };
// olm is an optional dependency. Ignore it if it's not installed, to avoid a // olm is an optional dependency. Ignore it if it's not installed, to avoid a