element-web/webpack.config.js
Richard van der Hoff b20f6ff8c1 Silence webpack dev server
Configure the dev server not to spew module lists all over the console.

(Arguably the fact our module list is so long that I have to do this is a bug,
but my life is too short)
2017-02-03 11:40:07 +00:00

150 lines
5.9 KiB
JavaScript

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
"bundle": "./src/vector/index.js",
// We ship olm.js as a separate lump of javascript. This makes it get
// loaded via a separate <script/> tag in index.html (which loads it
// into the browser global `Olm`), and define it as an external below.
//
// (we should probably make js-sdk load it asynchronously at some
// point, so that it doesn't block the pageload, but that is a separate
// problem)
"olm": "./src/vector/olm-loader.js",
// CSS themes
"theme-light": "./src/skins/vector/css/themes/light.scss",
"theme-dark": "./src/skins/vector/css/themes/dark.scss"
},
module: {
preLoaders: [
{ test: /\.js$/, loader: "source-map-loader" }
],
loaders: [
{ test: /\.json$/, loader: "json" },
{ test: /\.js$/, loader: "babel", include: path.resolve('./src') },
{
test: /\.scss$/,
// 1. postcss-loader turns the SCSS into normal CSS.
// 2. css-raw-loader turns the CSS into a javascript module
// whose default export is a string containing the CSS.
// (css-raw-loader is similar to css-loader, but the latter
// would also drag in the imgs and fonts that our CSS refers to
// as webpack inputs.)
// 3. ExtractTextPlugin turns that string into a separate asset.
loader: ExtractTextPlugin.extract(
"css-raw-loader!postcss-loader?config=postcss.config.js"
),
},
{
// this works similarly to the scss case, without postcss.
test: /\.css$/,
loader: ExtractTextPlugin.extract("css-raw-loader"),
},
],
noParse: [
// don't parse the languages within highlight.js. They cause stack
// overflows (https://github.com/webpack/webpack/issues/1721), and
// there is no need for webpack to parse them - they can just be
// included as-is.
/highlight\.js\/lib\/languages/,
// olm takes ages for webpack to process, and it's already heavily
// optimised, so there is little to gain by us uglifying it.
/olm\/(javascript\/)?olm\.js$/,
],
},
output: {
path: path.join(__dirname, "webapp"),
// the generated js (and CSS, from the ExtractTextPlugin) are put in a
// unique subdirectory for the build. There will only be one such
// 'bundle' directory in the generated tarball; however, hosting
// servers can collect 'bundles' from multiple versions into one
// directory and symlink it into place - this allows users who loaded
// an older version of the application to continue to access webpack
// chunks even after the app is redeployed.
//
filename: "bundles/[hash]/[name].js",
chunkFilename: "bundles/[hash]/[name].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
// workaround.
// We use the relative resource path with any '../'s on the front
// removed which gives a tree with matrix-react-sdk and vector
// trees smashed together, but this fixes everything being under
// various levels of '.' and '..'
// Also, sometimes the resource path is absolute.
return path.relative(process.cwd(), info.resourcePath).replace(/^[\/\.]*/, '');
}
},
resolve: {
alias: {
// alias any requires to the react module to the one in our path, otherwise
// we tend to get the react source included twice when using npm link.
"react": path.resolve('./node_modules/react'),
"react-dom": path.resolve('./node_modules/react-dom'),
"react-addons-perf": path.resolve('./node_modules/react-addons-perf'),
// same goes for js-sdk
"matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),
},
},
externals: {
"olm": "Olm",
// Don't try to bundle electron: leave it as a commonjs dependency
// (the 'commonjs' here means it will output a 'require')
"electron": "commonjs electron",
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
}),
new ExtractTextPlugin(
"bundles/[hash]/[name].css",
{
allChunks: true
}
),
new HtmlWebpackPlugin({
template: './src/vector/index.html',
// we inject the links ourselves via the template, because
// HtmlWebpackPlugin wants to put the script tags either at the
// bottom of <head> or the bottom of <body>, and I'm a bit scared
// about moving them.
inject: false,
}),
],
devtool: 'source-map',
// configuration for the webpack-dev-server
devServer: {
// serve unwebpacked assets from webapp.
contentBase: './webapp',
stats: {
// don't fill the console up with a mahoosive list of modules
chunks: false,
},
},
};
// olm is an optional dependency. Ignore it if it's not installed, to avoid a
// scary-looking error.
try {
require('olm');
} catch (e) {
console.log("Olm is not installed; not shipping it");
delete(module.exports.entry["olm"]);
}