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)$/, loader: 'file-loader', options: { // Use a content-based hash in the name so that we can set a // long cache lifetime for assets while still delivering // changes quickly. name: '[name].[hash:7].[ext]', outputPath: function(url, resourcePath, context) { // Merge assets found via CSS and imports into a single // tree, while also preserving directories under **/res. const prefix = /^.*\/res\//; const outputDir = path.dirname(resourcePath).replace(prefix, ""); return path.join(outputDir, path.basename(url)); }, publicPath: function(url, resourcePath, context) { // Merge assets found via CSS and imports into a single // tree, while also preserving directories under **/res. const prefix = /^.*\/res\//; const outputDir = path.dirname(resourcePath).replace(prefix, ""); return path.join("../..", outputDir, path.basename(url)); }, }, }, ], 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, }, };