PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3
element-web/webpack.config.js

116 lines
4.3 KiB
JavaScript
Raw Normal View History

Switch to webpack Webapck actually supports loading input source maps and generally seems a lot more solid then browserify (even if their website has an annoying animated logo).
2015-09-25 10:43:28 +00:00
var path = require('path');
var webpack = require('webpack');
Run the CSS through webpack so we can pull in CSS files from modules with require rather than symlinking into the node_module directory which is breaking people on different npm versions.
2015-12-01 18:05:43 +00:00
var ExtractTextPlugin = require("extract-text-webpack-plugin");
Put a cachebuster in the names of CSS and JS files This means that clients can do better caching of assets, as it will mean we are no longer reliant on etags to ensure that clients get a fresh version. We inhibit the cachebuster for `npm start`, so that we don't get millions of copies of the bundles on dev boxes.
2016-10-25 16:07:43 +00:00
var HtmlWebpackPlugin = require('html-webpack-plugin');
Switch to webpack Webapck actually supports loading input source maps and generally seems a lot more solid then browserify (even if their website has an annoying animated logo).
2015-09-25 10:43:28 +00:00
module.exports = {
Use webpack to copy olm.js Rather than copying olm.js ourselves in package.json, get webpack to do it for us by declaring it as a second entry point.
2016-10-26 13:13:36 +00:00
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)
Configure olm memory size 16M is somewhat excessive: configure olm to use a bit less. Requires changes to the olm library to do anything useful, but will be harmless without them. Partial fix to vector-im/riot-web#2726.
2016-12-14 11:59:37 +00:00
"olm": "./src/vector/olm-loader.js",
Use webpack to copy olm.js Rather than copying olm.js ourselves in package.json, get webpack to do it for us by declaring it as a second entry point.
2016-10-26 13:13:36 +00:00
},
Switch to webpack Webapck actually supports loading input source maps and generally seems a lot more solid then browserify (even if their website has an annoying animated logo).
2015-09-25 10:43:28 +00:00
module: {
preLoaders: [
{ test: /\.js$/, loader: "source-map-loader" }
],
loaders: [
{ test: /\.json$/, loader: "json" },
{ test: /\.js$/, loader: "babel", include: path.resolve('./src') },
Run the CSS through webpack so we can pull in CSS files from modules with require rather than symlinking into the node_module directory which is breaking people on different npm versions.
2015-12-01 18:05:43 +00:00
// css-raw-loader loads CSS but doesn't try to treat url()s as require()s
{ test: /\.css$/, loader: ExtractTextPlugin.extract("css-raw-loader") },
Tell webpack not to parse the highlight.js languages Hopefully, this fixes https://github.com/vector-im/vector-web/issues/1046 without any side-effects. It relies on the fact that the languages files are pretty simple - in particular, they don't require any other modules. So we can tell webpack just to suck them in as they are, rather than parsing them and causing an explosm.
2016-03-24 22:51:50 +00:00
],
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/,
Use webpack to copy olm.js Rather than copying olm.js ourselves in package.json, get webpack to do it for us by declaring it as a second entry point.
2016-10-26 13:13:36 +00:00
// 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$/,
Tell webpack not to parse the highlight.js languages Hopefully, this fixes https://github.com/vector-im/vector-web/issues/1046 without any side-effects. It relies on the fact that the languages files are pretty simple - in particular, they don't require any other modules. So we can tell webpack just to suck them in as they are, rather than parsing them and causing an explosm.
2016-03-24 22:51:50 +00:00
],
Switch to webpack Webapck actually supports loading input source maps and generally seems a lot more solid then browserify (even if their website has an annoying animated logo).
2015-09-25 10:43:28 +00:00
},
Slightly improve source path tree in the browser debugger
2015-10-15 13:40:36 +00:00
output: {
Build to the 'webapp' directory instead People may have config files in vector/ so it would be nonideal if we started overwriting them / blowing them away.
2016-11-08 15:46:21 +00:00
path: path.join(__dirname, "webapp"),
Put parent build hash in webpack output filenames In order to better support a world where old build artifacts are available (which is necessary to support bundle.js splitting), collect all the webpack artifacts for the build into a single directory. Then we'll be able to clear out old builds after a few weeks, knowing they won't be in use any more.
2017-01-16 18:01:25 +00:00
filename: "[hash]/[name].js",
chunkFilename: "[hash]/[name].js",
Slightly improve source path tree in the browser debugger
2015-10-15 13:40:36 +00:00
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 '..'
Relative-ize paths in webpack config: they're supposed to be relative but sometimes they aren't.
2015-10-23 09:16:00 +00:00
// Also, sometimes the resource path is absolute.
return path.relative(process.cwd(), info.resourcePath).replace(/^[\/\.]*/, '');
Slightly improve source path tree in the browser debugger
2015-10-15 13:40:36 +00:00
}
},
Switch to webpack Webapck actually supports loading input source maps and generally seems a lot more solid then browserify (even if their website has an annoying animated logo).
2015-09-25 10:43:28 +00:00
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.
Make sure we only pack one copy of react-dom (#2603) Fixes https://github.com/vector-im/vector-web/issues/2601
2016-11-18 17:52:44 +00:00
"react": path.resolve('./node_modules/react'),
"react-dom": path.resolve('./node_modules/react-dom'),
Include react-addons-perf for non-production builds This makes it possible to gather a few performance stats
2016-04-17 20:06:51 +00:00
"react-addons-perf": path.resolve('./node_modules/react-addons-perf'),
Include olm in the webpack if it's been installed .. to make it easy to build a crypto-enabled vector
2015-12-02 14:54:26 +00:00
Karma test tweaks * Make sure we only get one js-sdk (and update runtime config to match) * Don't verifyNoOutstandingRequests (since it is hard to be certain which we will get, and makes the tests too dependent on implementation-specifics). * Disable color for npm test, to avoid confusing Jenkins
2016-04-13 16:41:23 +00:00
// same goes for js-sdk
"matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'),
Switch to webpack Webapck actually supports loading input source maps and generally seems a lot more solid then browserify (even if their website has an annoying animated logo).
2015-09-25 10:43:28 +00:00
},
},
Exclude olm from the webpack Olm takes *ages* to webpack, and it doesn't compress well. So, serve it as a separate asset to the browser.
2016-08-02 11:42:06 +00:00
externals: {
"olm": "Olm",
Electron support From https://github.com/vector-im/vector-web/pull/2511 but with just the actual electron changes
2016-11-02 18:49:28 +00:00
// Don't try to bundle electron: leave it as a commonjs dependency
// (the 'commonjs' here means it will output a 'require')
"electron": "commonjs electron",
Exclude olm from the webpack Olm takes *ages* to webpack, and it doesn't compress well. So, serve it as a separate asset to the browser.
2016-08-02 11:42:06 +00:00
},
Switch to webpack Webapck actually supports loading input source maps and generally seems a lot more solid then browserify (even if their website has an annoying animated logo).
2015-09-25 10:43:28 +00:00
plugins: [
Actually turn on production mode: env vars need to be explicitly passed through
2015-10-14 08:20:18 +00:00
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV)
}
Include olm in the webpack if it's been installed .. to make it easy to build a crypto-enabled vector
2015-12-02 14:54:26 +00:00
}),
Put a cachebuster in the names of CSS and JS files This means that clients can do better caching of assets, as it will mean we are no longer reliant on etags to ensure that clients get a fresh version. We inhibit the cachebuster for `npm start`, so that we don't get millions of copies of the bundles on dev boxes.
2016-10-25 16:07:43 +00:00
new ExtractTextPlugin(
Put parent build hash in webpack output filenames In order to better support a world where old build artifacts are available (which is necessary to support bundle.js splitting), collect all the webpack artifacts for the build into a single directory. Then we'll be able to clear out old builds after a few weeks, knowing they won't be in use any more.
2017-01-16 18:01:25 +00:00
"[hash]/[name].css",
Put a cachebuster in the names of CSS and JS files This means that clients can do better caching of assets, as it will mean we are no longer reliant on etags to ensure that clients get a fresh version. We inhibit the cachebuster for `npm start`, so that we don't get millions of copies of the bundles on dev boxes.
2016-10-25 16:07:43 +00:00
{
allChunks: true
}
),
new HtmlWebpackPlugin({
template: './src/vector/index.html',
webpack: Improve comment on HtmlWebpackPlugin
2016-10-26 15:52:26 +00:00
// 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,
Merge branch 'develop' into rav/olm Conflicts: webpack.config.js
2015-12-03 18:28:50 +00:00
}),
Switch to webpack Webapck actually supports loading input source maps and generally seems a lot more solid then browserify (even if their website has an annoying animated logo).
2015-09-25 10:43:28 +00:00
],
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.
2016-11-03 14:58:30 +00:00
devtool: 'source-map',
// configuration for the webpack-dev-server
devServer: {
Build to the 'webapp' directory instead People may have config files in vector/ so it would be nonideal if we started overwriting them / blowing them away.
2016-11-08 15:46:21 +00:00
// serve unwebpacked assets from webapp.
contentBase: './webapp',
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.
2016-11-03 14:58:30 +00:00
},
Switch to webpack Webapck actually supports loading input source maps and generally seems a lot more solid then browserify (even if their website has an annoying animated logo).
2015-09-25 10:43:28 +00:00
};
Avoid errors if olm is missing If olm isn't installed, webpack prints out scary warnings (though it still actually succeeds). Let's avoid scaring people by quietly removing it from the list of things to process.
2016-10-27 09:16:10 +00:00
// 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"]);
}
Reference in a new issue Copy permalink