mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-25 02:35:48 +03:00
Code Issues Projects Releases Packages Wiki Activity
element-web/webpack.config.js

114 lines
4.1 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 13:43:28 +03: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 21:05:43 +03: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 19:07:43 +03:00
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;
}
}
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 13:43:28 +03: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 16:13:36 +03: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)
"olm": "olm/olm.js",
},
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 13:43:28 +03: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 21:05:43 +03: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-25 01:51:50 +03: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 16:13:36 +03: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-25 01:51:50 +03: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 13:43:28 +03:00
},
Slightly improve source path tree in the browser debugger
2015-10-15 16:40:36 +03:00
output: {
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 16:13:36 +03:00
path: path.join(__dirname, "vector"),
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 19:07:43 +03:00
filename: "[name]" + (cachebuster ? ".[chunkhash]" : "") + ".js",
Slightly improve source path tree in the browser debugger
2015-10-15 16:40:36 +03: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 12:16:00 +03: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 16:40:36 +03: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 13:43:28 +03: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.
react: path.resolve('./node_modules/react'),
Include react-addons-perf for non-production builds This makes it possible to gather a few performance stats
2016-04-17 23:06:51 +03: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 17:54:26 +03: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 19:41:23 +03: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 13:43:28 +03: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 14:42:06 +03:00
externals: {
"olm": "Olm",
},
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 13:43:28 +03:00
plugins: [
Actually turn on production mode: env vars need to be explicitly passed through
2015-10-14 11:20:18 +03: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 17:54:26 +03: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 19:07:43 +03:00
new ExtractTextPlugin(
"[name]" + (cachebuster ? ".[contenthash]" : "") + ".css",
{
allChunks: true
}
),
new HtmlWebpackPlugin({
template: './src/vector/index.html',
webpack: Improve comment on HtmlWebpackPlugin
2016-10-26 18:52:26 +03: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 21:28:50 +03: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 13:43:28 +03:00
],
devtool: 'source-map'
};
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 12:16:10 +03: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