element-web/webpack.config.js
J. Ryan Stinnett 7a3df1c7d6 Support image URLs in HTML templates
Expands the image build process to also support the right paths when used in
HTML templates.
2019-01-18 08:39:16 -06:00

199 lines
8.4 KiB
JavaScript

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
let og_image_url = process.env.RIOT_OG_IMAGE_URL;
if (!og_image_url) og_image_url = 'https://riot.im/app/themes/riot/img/logos/riot-im-logo-1.png';
module.exports = {
entry: {
// Load babel-polyfill first to avoid issues where some imports (namely react)
// are potentially loaded before babel-polyfill.
"bundle": ["babel-polyfill", "./src/vector/index.js"],
"indexeddb-worker": "./src/vector/indexeddb-worker.js",
"mobileguide": "./src/vector/mobile_guide/index.js",
// CSS themes
"theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss",
"theme-dark": "./node_modules/matrix-react-sdk/res/themes/dark/css/dark.scss",
"theme-dharma": "./node_modules/matrix-react-sdk/res/themes/dharma/css/dharma.scss",
"theme-status": "./res/themes/status/css/status.scss",
},
module: {
rules: [
{ enforce: 'pre', test: /\.js$/, use: "source-map-loader", exclude: /node_modules/, },
{ test: /\.js$/, use: "babel-loader", include: path.resolve(__dirname, 'src') },
{
test: /\.scss$/,
// 1. postcss-loader turns the SCSS into normal CSS.
// 2. css-loader turns the CSS into a JS module whose default
// export is a string containing the CSS, while also adding
// the images and fonts from CSS as Webpack inputs.
// 3. ExtractTextPlugin turns that string into a separate asset.
use: ExtractTextPlugin.extract({
use: [
"css-loader",
{
loader: 'postcss-loader',
options: {
config: {
path: './postcss.config.js',
},
},
},
],
}),
},
{
// this works similarly to the scss case, without postcss.
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: "css-loader",
}),
},
{
test: /\.(gif|png|svg|ttf)$/,
// Use a content-based hash in the name so that we can set a long cache
// lifetime for assets while still delivering changes quickly.
oneOf: [
{
// Images referenced in HTML files
issuer: /\.html$/,
loader: 'file-loader',
options: {
name: '[name].[hash:7].[ext]',
outputPath: getImgOutputPath,
},
},
{
// Images referenced in JS and CSS files
loader: 'file-loader',
options: {
name: '[name].[hash:7].[ext]',
outputPath: getImgOutputPath,
publicPath: function(url, resourcePath) {
// JS and CSS image usages end up the `bundles/[hash]` output
// directory, so we adjust the final path to navigate up twice.
return path.join("../..", getImgOutputPath(url, resourcePath));
},
},
},
],
},
],
noParse: [
// for cross platform compatibility use [\\\/] as the path separator
// this ensures that the regex trips on both Windows and *nix
// 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'),
},
},
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,
excludeChunks: ['mobileguide'],
vars: {
og_image_url: og_image_url,
},
}),
new HtmlWebpackPlugin({
template: './src/vector/mobile_guide/index.html',
filename: 'mobile_guide/index.html',
chunks: ['mobileguide'],
}),
],
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,
},
// hot mdule replacement doesn't work (I think we'd need react-hot-reload?)
// so webpack-dev-server reloads the page on every update which is quite
// tedious in Riot since that can take a while.
hot: false,
inline: false,
},
};
/**
* Merge assets found via CSS and imports into a single tree, while also preserving
* directories under `res`.
*
* @param {string} url The adjusted name of the file, such as `warning.1234567.svg`.
* @param {string} resourcePath The absolute path to the source file with unmodified name.
* @return {string} The returned paths will look like `img/warning.1234567.svg`.
*/
function getImgOutputPath(url, resourcePath) {
const prefix = /^.*\/res\//;
const outputDir = path.dirname(resourcePath).replace(prefix, "");
return path.join(outputDir, path.basename(url));
}