From f9764d8fc6cc0e15dec6428d3455b8436fde9fc6 Mon Sep 17 00:00:00 2001 From: Christopher Willis-Ford Date: Thu, 27 Dec 2018 15:29:57 -0800 Subject: [PATCH] Further simplify and consolidate webpack config --- package.json | 2 +- webpack.main.additions.js | 69 +++----------------------- webpack.makeConfig.js | 85 ++++++++++++++++++++++++++++++++ webpack.renderer.additions.js | 92 +++++------------------------------ 4 files changed, 106 insertions(+), 142 deletions(-) create mode 100644 webpack.makeConfig.js diff --git a/package.json b/package.json index 3daf79d..95e9be9 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "clean": "rimraf ./dist/ ./static/assets/", "compile": "rimraf ./dist/ && electron-webpack --bail --display-error-details --env.minify=false", "fetch": "rimraf ./static/assets/ && mkdirp ./static/assets/ && node ./scripts/fetchMediaLibraryAssets.js", - "dist": "npm run fetch && npm run compile && electron-builder", + "dist": "npm run fetch && npm run compile -p && electron-builder", "dist:dir": "npm run dist -- --dir -c.compression=store -c.mac.identity=null", "lint": "eslint --cache --color --ext .jsx,.js ." }, diff --git a/webpack.main.additions.js b/webpack.main.additions.js index 74ef45a..96a8ceb 100644 --- a/webpack.main.additions.js +++ b/webpack.main.additions.js @@ -1,64 +1,11 @@ -const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); -const webpack = require('webpack'); +const path = require('path'); -const isProduction = (process.env.NODE_ENV === 'production'); +const makeConfig = require('./webpack.makeConfig.js'); -console.log(`Main module building in production mode? ${isProduction}`); - -const babelOptions = { - // Explicitly disable babelrc so we don't catch various config - // in much lower dependencies. - babelrc: false, - plugins: [ - '@babel/plugin-syntax-dynamic-import', - '@babel/plugin-transform-async-to-generator', - '@babel/plugin-proposal-object-rest-spread' - ], - presets: [ - ['@babel/preset-env', {targets: {electron: '3.0.2'}}] +module.exports = makeConfig({ + name: 'main', + useReact: false, + babelPaths: [ + path.resolve(__dirname, 'src', 'main') ] -}; - -module.exports = { - mode: isProduction ? 'production' : 'development', - module: { - rules: [ - // Override the *.js defaults from electron-webpack - // The test/include/exclude must match the defaults exactly for webpack-merge to do the override - { - test: /\.js$/, - exclude: /(node_modules|bower_components)/, - loader: 'babel-loader', - options: babelOptions - }, - { - test: /.js$/, - loader: 'source-map-loader', - enforce: 'pre' - } - ] - }, - optimization: { - // Use `--env.minify=false` to disable the UglifyJsPlugin instance automatically injected by electron-webpack. - // Otherwise it will do double-duty with this one. - minimizer: [ - new UglifyJsPlugin({ - cache: true, - parallel: true, - sourceMap: true, // disable this if UglifyJSPlugin takes too long and/or runs out of memory - uglifyOptions: { - compress: isProduction ? {} : false, - mangle: isProduction - } - }) - ] - }, - plugins: [ - new webpack.SourceMapDevToolPlugin({ - filename: '[file].map' - }) - ], - resolve: { - symlinks: false - } -}; +}); diff --git a/webpack.makeConfig.js b/webpack.makeConfig.js new file mode 100644 index 0000000..8ff5bde --- /dev/null +++ b/webpack.makeConfig.js @@ -0,0 +1,85 @@ +const webpack = require('webpack'); +const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); + +const isProduction = (process.env.NODE_ENV === 'production'); + +const makeConfig = function (options) { + // eslint-disable-next-line no-console + console.log(`Module "${options.name}" building in production mode? ${isProduction}`); + + const babelOptions = { + // Explicitly disable babelrc so we don't catch various config in much lower dependencies. + babelrc: false, + plugins: [ + '@babel/plugin-syntax-dynamic-import', + '@babel/plugin-transform-async-to-generator', + '@babel/plugin-proposal-object-rest-spread' + ], + presets: [ + ['@babel/preset-env', {targets: {electron: '3.0.2'}}] + ] + }; + + const sourceFileTest = options.useReact ? /\.jsx?$/ : /\.js$/; + if (options.useReact) { + babelOptions.presets = babelOptions.presets.concat('@babel/preset-react'); + babelOptions.plugins.push(['react-intl', { + messagesDir: './translations/messages/' + }]); + } + + return { + devtool: 'cheap-module-eval-source-map', + mode: isProduction ? 'production' : 'development', + module: { + rules: [ + // Override the *.js defaults from electron-webpack + // The test/include/exclude must match the defaults exactly for webpack-merge to do the override + { + test: /\.js$/, + exclude: /(node_modules|bower_components)/, + loader: 'babel-loader', + options: babelOptions + }, + // Add a new rule for the other files we want to run through babel + { + test: sourceFileTest, + include: options.babelPaths, + loader: 'babel-loader', + options: babelOptions + }, + { + test: sourceFileTest, + loader: 'source-map-loader', + enforce: 'pre' + } + ] + }, + optimization: { + // Use `--env.minify=false` to disable the UglifyJsPlugin instance automatically injected by + // electron-webpack. Otherwise it will do double-duty with this one. + minimizer: isProduction ? [ + new UglifyJsPlugin({ + cache: true, + parallel: true, + sourceMap: true, // disable this if UglifyJSPlugin takes too long and/or runs out of memory + uglifyOptions: { + compress: isProduction ? {} : false, + mangle: isProduction + } + }) + ] : [] + }, + plugins: [ + new webpack.SourceMapDevToolPlugin({ + filename: '[file].map' + }) + ].concat(options.plugins || []), + resolve: { + cacheWithContext: false, + symlinks: false + } + }; +}; + +module.exports = makeConfig; diff --git a/webpack.renderer.additions.js b/webpack.renderer.additions.js index 98b5c64..be1a896 100644 --- a/webpack.renderer.additions.js +++ b/webpack.renderer.additions.js @@ -1,87 +1,19 @@ const path = require('path'); const CopyWebpackPlugin = require('copy-webpack-plugin'); -const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); -const webpack = require('webpack'); -const isProduction = (process.env.NODE_ENV === 'production'); +const makeConfig = require('./webpack.makeConfig.js'); -console.log(`Renderer module building in production mode? ${isProduction}`); - -const babelOptions = { - // Explicitly disable babelrc so we don't catch various config - // in much lower dependencies. - babelrc: false, - plugins: [ - '@babel/plugin-syntax-dynamic-import', - '@babel/plugin-transform-async-to-generator', - '@babel/plugin-proposal-object-rest-spread', - ['react-intl', { - messagesDir: './translations/messages/' - }] +module.exports = makeConfig({ + name: 'renderer', + useReact: true, + babelPaths: [ + path.resolve(__dirname, 'src', 'renderer') ], - presets: [ - ['@babel/preset-env', {targets: {electron: '3.0.2'}}], - '@babel/preset-react' + plugins: [ + new CopyWebpackPlugin([{ + from: path.resolve(__dirname, 'node_modules', 'scratch-gui', 'dist', 'static'), + to: 'static' + }]) ] -}; - -module.exports = { - mode: isProduction ? 'production' : 'development', - module: { - rules: [ - // Override the *.js defaults from electron-webpack - // The test/include/exclude must match the defaults exactly for webpack-merge to do the override - { - test: /\.js$/, - exclude: /(node_modules|bower_components)/, - loader: 'babel-loader', - options: babelOptions - }, - // Add a new rule for the other files we want to run through babel - { - test: /\.jsx?$/, - include: [ - path.resolve(__dirname, 'src', 'renderer'), - /node_modules[\\/]scratch-[^\\/]+[\\/]src/ - ], - loader: 'babel-loader', - options: babelOptions - }, - { - test: /.jsx?$/, - loader: 'source-map-loader', - enforce: 'pre' - } - ] - }, - optimization: { - // Use `--env.minify=false` to disable the UglifyJsPlugin instance automatically injected by electron-webpack. - // Otherwise it will do double-duty with this one. - minimizer: [ - new UglifyJsPlugin({ - cache: true, - parallel: true, - sourceMap: true, // disable this if UglifyJSPlugin takes too long and/or runs out of memory - uglifyOptions: { - compress: isProduction ? {} : false, - mangle: isProduction - } - }) - ] - }, - plugins: [ - new CopyWebpackPlugin([ - { - from: path.resolve(__dirname, 'node_modules', 'scratch-gui', 'dist', 'static'), - to: 'static' - } - ]), - new webpack.SourceMapDevToolPlugin({ - filename: '[file].map' - }) - ], - resolve: { - symlinks: false - } -}; +});