From 69d49f98819695d6cf34302ee72171c46dc43f3c Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 16 Jan 2020 11:33:55 -0700 Subject: [PATCH 1/3] Fix indentation of webpack config --- webpack.config.js | 50 +++++++++++++++++++++++------------------------ 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index b5ebcf3a45..4569826093 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -17,14 +17,14 @@ module.exports = (env, argv) => { return { entry: { "bundle": "./src/vector/index.js", - "indexeddb-worker": "./src/vector/indexeddb-worker.js", - "mobileguide": "./src/vector/mobile_guide/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-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss", - "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss", + // 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-light-custom": "./node_modules/matrix-react-sdk/res/themes/light-custom/css/light-custom.scss", + "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss", }, optimization: { @@ -35,8 +35,8 @@ module.exports = (env, argv) => { cacheGroups: { styles: { name: 'styles', - test: /\.css$/, - enforce: true, + test: /\.css$/, + enforce: true, // Do not add `chunks: 'all'` here because you'll break the app entry point. }, }, @@ -45,7 +45,7 @@ module.exports = (env, argv) => { // Minification is normally enabled by default for webpack in production mode, but // we use a CSS optimizer too and need to manage it ourselves. minimize: argv.mode === 'production', - minimizer: argv.mode === 'production' ? [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})] : [], + minimizer: argv.mode === 'production' ? [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})] : [], }, resolve: { @@ -59,22 +59,22 @@ module.exports = (env, argv) => { // layer to have our custom alternate fields to load things in the right order. These are // the defaults of webpack prepended with `matrix_src_`. mainFields: ['matrix_src_browser', 'matrix_src_main', 'browser', 'main'], - aliasFields: ['matrix_src_browser', 'browser'], + aliasFields: ['matrix_src_browser', 'browser'], - // We need to specify that TS can be resolved without an extension - extensions: ['.js', '.json', '.ts'], - alias: { + // We need to specify that TS can be resolved without an extension + extensions: ['.js', '.json', '.ts'], + 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` / `yarn link`. "react": path.resolve(__dirname, 'node_modules/react'), - "react-dom": path.resolve(__dirname, 'node_modules/react-dom'), + "react-dom": path.resolve(__dirname, 'node_modules/react-dom'), - // same goes for js-sdk - we don't need two copies. - "matrix-js-sdk": path.resolve(__dirname, 'node_modules/matrix-js-sdk'), + // same goes for js-sdk - we don't need two copies. + "matrix-js-sdk": path.resolve(__dirname, 'node_modules/matrix-js-sdk'), - // Define a variable so the i18n stuff can load - "$webapp": path.resolve(__dirname, 'webapp'), + // Define a variable so the i18n stuff can load + "$webapp": path.resolve(__dirname, 'webapp'), }, }, @@ -99,7 +99,7 @@ module.exports = (env, argv) => { exclude: /node_modules/, loader: 'babel-loader', options: { - cacheDirectory: true, + cacheDirectory: true } }, { @@ -283,8 +283,8 @@ module.exports = (env, argv) => { }), ], - output: { - path: path.join(__dirname, "webapp"), + output: { + path: path.join(__dirname, "webapp"), // The generated JS (and CSS, from the extraction plugin) are put in a // unique subdirectory for the build. There will only be one such @@ -295,7 +295,7 @@ module.exports = (env, argv) => { // chunks even after the app is redeployed. filename: "bundles/[hash]/[name].js", chunkFilename: "bundles/[hash]/[name].js", - }, + }, // DO NOT enable this option. It makes the source maps all wonky. Instead, // we end up including the sourcemaps through the loaders which makes them @@ -307,7 +307,7 @@ module.exports = (env, argv) => { // serve unwebpacked assets from webapp. contentBase: './webapp', - stats: { + stats: { // don't fill the console up with a mahoosive list of modules chunks: false, }, @@ -316,7 +316,7 @@ module.exports = (env, argv) => { // 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, + inline: false, }, }; }; From bb931e25d870fa989e4d2875c928737fc6a9a8fe Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 16 Jan 2020 11:47:16 -0700 Subject: [PATCH 2/3] Make sourcemaps legible by humans --- webpack.config.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 4569826093..28d0bfea7e 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -42,6 +42,10 @@ module.exports = (env, argv) => { }, }, + // This fixes duplicate files showing up in chrome with sourcemaps enabled. + // See https://github.com/webpack/webpack/issues/7128 for more info. + namedModules: false, + // Minification is normally enabled by default for webpack in production mode, but // we use a CSS optimizer too and need to manage it ourselves. minimize: argv.mode === 'production', @@ -297,10 +301,9 @@ module.exports = (env, argv) => { chunkFilename: "bundles/[hash]/[name].js", }, - // DO NOT enable this option. It makes the source maps all wonky. Instead, - // we end up including the sourcemaps through the loaders which makes them - // more accurate. - //devtool: "source-map", + // This makes the sourcemaps human readable for developers. We use eval-source-map + // because the plain source-map devtool ruins the alignment. + devtool: "eval-source-map", // configuration for the webpack-dev-server devServer: { From fb9503199dcf682493b29feda74f9455c497b52a Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Thu, 16 Jan 2020 11:55:54 -0700 Subject: [PATCH 3/3] Don't calculate sourcemaps in production --- webpack.config.js | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 28d0bfea7e..255f0ce255 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -14,7 +14,16 @@ module.exports = (env, argv) => { argv.mode = "development"; } + const development = {}; + if (argv.mode !== "production") { + // This makes the sourcemaps human readable for developers. We use eval-source-map + // because the plain source-map devtool ruins the alignment. + development['devtool'] = 'eval-source-map'; + } + return { + ...development, + entry: { "bundle": "./src/vector/index.js", "indexeddb-worker": "./src/vector/indexeddb-worker.js", @@ -301,10 +310,6 @@ module.exports = (env, argv) => { chunkFilename: "bundles/[hash]/[name].js", }, - // This makes the sourcemaps human readable for developers. We use eval-source-map - // because the plain source-map devtool ruins the alignment. - devtool: "eval-source-map", - // configuration for the webpack-dev-server devServer: { // serve unwebpacked assets from webapp.