OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #11892 from vector-im/travis/fix-sourcemaps 

Fix indentation on webpack config and make sourcemapped files legible
pull/11893/head
Travis Ralston 2020-01-16 12:01:32 -07:00 committed by GitHub
parent 6ce50435e3 fb9503199d
commit 9a084a6801
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
webpack.config.js
View File

@ -14,17 +14,26 @@ module.exports = (env, argv) => {
argv.mode = "development"; 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 { return {
...development,
entry: { entry: {
"bundle": "./src/vector/index.js", "bundle": "./src/vector/index.js",
"indexeddb-worker": "./src/vector/indexeddb-worker.js", "indexeddb-worker": "./src/vector/indexeddb-worker.js",
"mobileguide": "./src/vector/mobile_guide/index.js", "mobileguide": "./src/vector/mobile_guide/index.js",
// CSS themes // CSS themes
"theme-light": "./node_modules/matrix-react-sdk/res/themes/light/css/light.scss", "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-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-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", "theme-dark-custom": "./node_modules/matrix-react-sdk/res/themes/dark-custom/css/dark-custom.scss",
}, },
optimization: { optimization: {
@ -35,17 +44,21 @@ module.exports = (env, argv) => {
cacheGroups: { cacheGroups: {
styles: { styles: {
name: 'styles', name: 'styles',
test: /\.css$/, test: /\.css$/,
enforce: true, enforce: true,
// Do not add `chunks: 'all'` here because you'll break the app entry point. // Do not add `chunks: 'all'` here because you'll break the app entry point.
}, },
}, },
}, },
// 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 // Minification is normally enabled by default for webpack in production mode, but
// we use a CSS optimizer too and need to manage it ourselves. // we use a CSS optimizer too and need to manage it ourselves.
minimize: argv.mode === 'production', minimize: argv.mode === 'production',
minimizer: argv.mode === 'production' ? [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})] : [], minimizer: argv.mode === 'production' ? [new TerserPlugin({}), new OptimizeCSSAssetsPlugin({})] : [],
}, },
resolve: { resolve: {
@ -59,22 +72,22 @@ module.exports = (env, argv) => {
// layer to have our custom alternate fields to load things in the right order. These are // layer to have our custom alternate fields to load things in the right order. These are
// the defaults of webpack prepended with `matrix_src_`. // the defaults of webpack prepended with `matrix_src_`.
mainFields: ['matrix_src_browser', 'matrix_src_main', 'browser', 'main'], 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 // We need to specify that TS can be resolved without an extension
extensions: ['.js', '.json', '.ts'], extensions: ['.js', '.json', '.ts'],
alias: { alias: {
// alias any requires to the react module to the one in our path, // alias any requires to the react module to the one in our path,
// otherwise we tend to get the react source included twice when // otherwise we tend to get the react source included twice when
// using `npm link` / `yarn link`. // using `npm link` / `yarn link`.
"react": path.resolve(__dirname, 'node_modules/react'), "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. // same goes for js-sdk - we don't need two copies.
"matrix-js-sdk": path.resolve(__dirname, 'node_modules/matrix-js-sdk'), "matrix-js-sdk": path.resolve(__dirname, 'node_modules/matrix-js-sdk'),
// Define a variable so the i18n stuff can load // Define a variable so the i18n stuff can load
"$webapp": path.resolve(__dirname, 'webapp'), "$webapp": path.resolve(__dirname, 'webapp'),
}, },
}, },
@ -99,7 +112,7 @@ module.exports = (env, argv) => {
exclude: /node_modules/, exclude: /node_modules/,
loader: 'babel-loader', loader: 'babel-loader',
options: { options: {
cacheDirectory: true, cacheDirectory: true
} }
}, },
{ {
@ -283,8 +296,8 @@ module.exports = (env, argv) => {
}), }),
], ],
output: { output: {
path: path.join(__dirname, "webapp"), path: path.join(__dirname, "webapp"),
// The generated JS (and CSS, from the extraction plugin) are put in a // The generated JS (and CSS, from the extraction plugin) are put in a
// unique subdirectory for the build. There will only be one such // unique subdirectory for the build. There will only be one such
@ -295,19 +308,14 @@ module.exports = (env, argv) => {
// chunks even after the app is redeployed. // chunks even after the app is redeployed.
filename: "bundles/[hash]/[name].js", filename: "bundles/[hash]/[name].js",
chunkFilename: "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
// more accurate.
//devtool: "source-map",
// configuration for the webpack-dev-server // configuration for the webpack-dev-server
devServer: { devServer: {
// serve unwebpacked assets from webapp. // serve unwebpacked assets from webapp.
contentBase: './webapp', contentBase: './webapp',
stats: { stats: {
// don't fill the console up with a mahoosive list of modules // don't fill the console up with a mahoosive list of modules
chunks: false, chunks: false,
}, },
@ -316,7 +324,7 @@ module.exports = (env, argv) => {
// so webpack-dev-server reloads the page on every update which is quite // so webpack-dev-server reloads the page on every update which is quite
// tedious in Riot since that can take a while. // tedious in Riot since that can take a while.
hot: false, hot: false,
inline: false, inline: false,
}, },
}; };
}; };