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",
"dist": "scripts/package.sh",
"start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/ -w",
"start:js": "webpack -w --progress --no-cache-buster",
"start:js:prod": "NODE_ENV=production webpack -w --progress --no-cache-buster",
"start:js": "webpack-dev-server -w --progress",
"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",
"//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\" \"http-server -c 1 vector\"",
"start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"",
"start": "node scripts/babelcheck.js && parallelshell \"npm run start:emojione\" \"npm run start:js\" \"npm run start:skins:css\"",
"start:prod": "parallelshell \"npm run start:emojione\" \"npm run start:js:prod\" \"npm run start:skins:css\"",
"clean": "rimraf build lib vector/olm.* vector/bundle.* vector/emojione vector/index.html",
"prepublish": "npm run build:compile",
"test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false",
@ -95,7 +94,6 @@
"expect": "^1.16.0",
"fs-extra": "^0.30.0",
"html-webpack-plugin": "^2.24.0",
"http-server": "^0.8.4",
"json-loader": "^0.5.3",
"karma": "^0.13.22",
"karma-chrome-launcher": "^0.2.3",
@ -113,7 +111,8 @@
"react-addons-test-utils": "^15.0.1",
"rimraf": "^2.4.3",
"source-map-loader": "^0.1.5",
"webpack": "^1.12.14"
"webpack": "^1.12.14",
"webpack-dev-server": "^1.16.2"
},
"optionalDependencies": {
"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 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 = {
entry: {
"bundle": "./src/vector/index.js",
@ -49,7 +40,7 @@ module.exports = {
},
output: {
path: path.join(__dirname, "vector"),
filename: "[name]" + (cachebuster ? ".[chunkhash]" : "") + ".js",
filename: "[name].[chunkhash].js",
devtoolModuleFilenameTemplate: function(info) {
// Reading input source maps gives only relative paths here for
// everything. Until I figure out how to fix this, this is a
@ -84,7 +75,7 @@ module.exports = {
}),
new ExtractTextPlugin(
"[name]" + (cachebuster ? ".[contenthash]" : "") + ".css",
"[name].[contenthash].css",
{
allChunks: true
}
@ -100,7 +91,13 @@ module.exports = {
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