From 04e02bdb08ffefe78407f246fd8ab8891d793e5a Mon Sep 17 00:00:00 2001 From: Asher Date: Tue, 26 Feb 2019 11:07:00 -0600 Subject: [PATCH] Fix extra CSS being included on the client --- build/tasks.ts | 6 +- packages/app/browser/webpack.config.js | 29 +++---- packages/dns/webpack.config.js | 31 +++---- packages/ide-api/yarn.lock | 4 + packages/server/package.json | 8 +- packages/server/src/vscode/bootstrapFork.ts | 2 +- packages/server/webpack.config.js | 55 ++++++------ packages/vscode/package.json | 2 +- packages/vscode/src/workbench.ts | 2 - packages/vscode/webpack.bootstrap.config.js | 69 +++++++++++++++ packages/vscode/webpack.config.bootstrap.js | 61 -------------- packages/web/webpack.common.config.js | 91 -------------------- packages/web/webpack.config.js | 93 +++++++++++++++++---- scripts/webpack.client.config.js | 58 +++++++++++++ scripts/webpack.general.config.js | 53 +----------- scripts/webpack.node.config.js | 8 ++ 16 files changed, 281 insertions(+), 291 deletions(-) create mode 100644 packages/ide-api/yarn.lock create mode 100644 packages/vscode/webpack.bootstrap.config.js delete mode 100644 packages/vscode/webpack.config.bootstrap.js delete mode 100644 packages/web/webpack.common.config.js create mode 100644 scripts/webpack.client.config.js create mode 100644 scripts/webpack.node.config.js diff --git a/build/tasks.ts b/build/tasks.ts index 0765d3143..a40a8e0cf 100644 --- a/build/tasks.ts +++ b/build/tasks.ts @@ -28,7 +28,7 @@ const buildServerBinaryPackage = register("build:server:binary:package", async ( const cliPath = path.join(pkgsPath, "server"); runner.cwd = cliPath; if (!fs.existsSync(path.join(cliPath, "out"))) { - throw new Error("Cannot build binary without web bundle built"); + throw new Error("Cannot build binary without server bundle built"); } await buildServerBinaryCopy(); await dependencyNexeBinary(); @@ -78,7 +78,7 @@ const buildServerBinaryCopy = register("build:server:binary:copy", async (runner const cliBuildPath = path.join(cliPath, "build"); fse.removeSync(cliBuildPath); fse.mkdirpSync(path.join(cliBuildPath, "extensions")); - const bootstrapForkPath = path.join(pkgsPath, "vscode", "bin", "bootstrap-fork.js"); + const bootstrapForkPath = path.join(pkgsPath, "vscode", "out", "bootstrap-fork.js"); const webOutputPath = path.join(pkgsPath, "web", "out"); const browserAppOutputPath = path.join(pkgsPath, "app", "browser", "out"); const nodePtyModule = path.join(pkgsPath, "protocol", "node_modules", "node-pty", "build", "Release", "pty.node"); @@ -124,7 +124,7 @@ const buildServerBinaryCopy = register("build:server:binary:copy", async (runner const buildServerBundle = register("build:server:bundle", async (runner) => { const cliPath = path.join(pkgsPath, "server"); runner.cwd = cliPath; - await runner.execute("npm", ["run", "build:webpack"]); + await runner.execute("npm", ["run", "build"]); }); const buildBootstrapFork = register("build:bootstrap-fork", async (runner) => { diff --git a/packages/app/browser/webpack.config.js b/packages/app/browser/webpack.config.js index ac119e0e6..4c7d24f98 100644 --- a/packages/app/browser/webpack.config.js +++ b/packages/app/browser/webpack.config.js @@ -2,23 +2,16 @@ const path = require("path"); const webpack = require("webpack"); const merge = require("webpack-merge"); const HtmlWebpackPlugin = require("html-webpack-plugin"); -const prod = process.env.NODE_ENV === "production"; -module.exports = merge(require(path.join(__dirname, "../../../scripts", "webpack.general.config.js"))(), { - devtool: prod ? "source-map" : "cheap-module-eval-source-map", - mode: prod ? "production" : "development", - output: { - path: path.join(__dirname, "out"), +const root = path.resolve(__dirname, "../../.."); + +module.exports = merge( + require(path.join(root, "scripts/webpack.client.config.js"))({ + entry: path.join(root, "packages/app/browser/src/app.ts"), + template: path.join(root, "packages/app/browser/src/app.html"), + }), { + output: { + path: path.join(__dirname, "out"), + }, }, - entry: [ - "webpack-hot-middleware/client?reload=true&quiet=true", - "./packages/app/browser/src/app.ts" - ], - plugins: [ - new HtmlWebpackPlugin({ - template: "packages/app/browser/src/app.html", - }), - new webpack.HotModuleReplacementPlugin(), - // new BundleAnalyzerPlugin(), - ] -}); +); diff --git a/packages/dns/webpack.config.js b/packages/dns/webpack.config.js index f0ecf2d2f..99308ddce 100644 --- a/packages/dns/webpack.config.js +++ b/packages/dns/webpack.config.js @@ -1,18 +1,21 @@ const path = require("path"); const merge = require("webpack-merge"); -module.exports = merge(require(path.join(__dirname, "../../scripts", "webpack.general.config.js"))(), { - devtool: "none", - mode: "production", - target: "node", - externals: { - "node-named": "commonjs node-named", +const root = path.resolve(__dirname, "../.."); + +module.exports = merge( + require(path.join(root, "scripts/webpack.node.config.js"))({ + // Options. + }), { + externals: { + "node-named": "commonjs node-named", + }, + output: { + path: path.join(__dirname, "out"), + filename: "main.js", + }, + entry: [ + "./packages/dns/src/dns.ts" + ], }, - output: { - path: path.join(__dirname, "out"), - filename: "main.js", - }, - entry: [ - "./packages/dns/src/dns.ts" - ], -}); +); diff --git a/packages/ide-api/yarn.lock b/packages/ide-api/yarn.lock new file mode 100644 index 000000000..fb57ccd13 --- /dev/null +++ b/packages/ide-api/yarn.lock @@ -0,0 +1,4 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + diff --git a/packages/server/package.json b/packages/server/package.json index dbe8484bc..317b7ff8b 100644 --- a/packages/server/package.json +++ b/packages/server/package.json @@ -5,12 +5,8 @@ "files": [], "scripts": { "start": "node --max-old-space-size=32384 --require ts-node/register --require tsconfig-paths/register src/cli.ts", - "build:webpack": "rm -rf ./out && export CLI=true && UV_THREADPOOL_SIZE=100 node --max-old-space-size=32384 ../../node_modules/webpack/bin/webpack.js --config ./webpack.config.js", - "build:nexe": "node scripts/nexe.js", - "build:bootstrap-fork": "cd ../vscode && npm run build:bootstrap-fork; mkdir -p ./packages/server/resources; cp ./bin/bootstrap-fork.js ../server/resources/bootstrap-fork.js", - "build:default-extensions": "cd ../../lib/vscode && npx gulp vscode-linux-arm && cd ../.. && mkdir -p ./packages/server/resources/extensions; cp -r ./lib/VSCode-linux-arm/resources/app/extensions/* ./packages/server/resources/extensions/", - "build:web": "cd ../web; rm -rf ./out; NODE_ENV=production npm run build; rm -rf ../server/resources/web; mkdir -p ../server/resources/web; cp -r ./out/* ../server/resources/web", - "build": "npm run build:bootstrap-fork && npm run build:webpack && npm run build:nexe" + "build": "rm -rf ./out && export CLI=true && UV_THREADPOOL_SIZE=100 node --max-old-space-size=32384 ../../node_modules/webpack/bin/webpack.js --config ./webpack.config.js", + "build:nexe": "node scripts/nexe.js" }, "dependencies": { "@oclif/config": "^1.10.4", diff --git a/packages/server/src/vscode/bootstrapFork.ts b/packages/server/src/vscode/bootstrapFork.ts index 972cde422..8643f3cdc 100644 --- a/packages/server/src/vscode/bootstrapFork.ts +++ b/packages/server/src/vscode/bootstrapFork.ts @@ -110,7 +110,7 @@ export const requireModule = (modulePath: string, dataDir: string, builtInExtens if (isCli) { content = zlib.gunzipSync(readFile("bootstrap-fork.js.gz")); } else { - content = readFile("../../vscode/bin/bootstrap-fork.js"); + content = readFile("../../vscode/out/bootstrap-fork.js"); } eval(content.toString()); }; diff --git a/packages/server/webpack.config.js b/packages/server/webpack.config.js index 8fd8de7f5..e6e39fe97 100644 --- a/packages/server/webpack.config.js +++ b/packages/server/webpack.config.js @@ -2,30 +2,33 @@ const path = require("path"); const webpack = require("webpack"); const merge = require("webpack-merge"); -module.exports = merge({ - devtool: "none", - mode: "production", - output: { - filename: "cli.js", - path: path.join(__dirname, "./out"), - libraryTarget: "commonjs", +const root = path.resolve(__dirname, "../.."); + +module.exports = merge( + require(path.join(root, "scripts/webpack.node.config.js"))({ + // Config options. + }), { + output: { + filename: "cli.js", + path: path.join(__dirname, "out"), + libraryTarget: "commonjs", + }, + node: { + console: false, + global: false, + process: false, + Buffer: false, + __filename: false, + __dirname: false, + setImmediate: false + }, + externals: ["tslib", "trash"], + entry: "./packages/server/src/cli.ts", + plugins: [ + new webpack.DefinePlugin({ + "process.env.BUILD_DIR": `"${__dirname}"`, + "process.env.CLI": `"${process.env.CLI ? "true" : "false"}"`, + }), + ], }, - node: { - console: false, - global: false, - process: false, - Buffer: false, - __filename: false, - __dirname: false, - setImmediate: false - }, - externals: ["tslib", "trash"], - entry: "./packages/server/src/cli.ts", - target: "node", - plugins: [ - new webpack.DefinePlugin({ - "process.env.BUILD_DIR": `"${__dirname}"`, - "process.env.CLI": `"${process.env.CLI ? "true" : "false"}"`, - }), - ], -}, require("../../scripts/webpack.general.config")()); +); diff --git a/packages/vscode/package.json b/packages/vscode/package.json index eebec866d..637b451c1 100644 --- a/packages/vscode/package.json +++ b/packages/vscode/package.json @@ -3,7 +3,7 @@ "description": "VS Code implementation of the browser-based IDE client.", "main": "src/index.ts", "scripts": { - "build:bootstrap-fork": "../../node_modules/.bin/webpack --config ./webpack.config.bootstrap.js" + "build:bootstrap-fork": "UV_THREADPOOL_SIZE=100 node --max-old-space-size=32384 ../../node_modules/webpack/bin/webpack.js --config ./webpack.bootstrap.config.js" }, "dependencies": { "iconv-lite": "^0.4.24", diff --git a/packages/vscode/src/workbench.ts b/packages/vscode/src/workbench.ts index 5929d8967..44e7608e7 100644 --- a/packages/vscode/src/workbench.ts +++ b/packages/vscode/src/workbench.ts @@ -29,8 +29,6 @@ import { RawContextKey, IContextKeyService } from "vs/platform/contextkey/common import { ServiceCollection } from "vs/platform/instantiation/common/serviceCollection"; import { URI } from "vs/base/common/uri"; -import "vs/loader"; - export class Workbench { private readonly windowId = parseInt(new Date().toISOString().replace(/[-:.TZ]/g, ""), 10); private _serviceCollection: ServiceCollection | undefined; diff --git a/packages/vscode/webpack.bootstrap.config.js b/packages/vscode/webpack.bootstrap.config.js new file mode 100644 index 000000000..24158cba2 --- /dev/null +++ b/packages/vscode/webpack.bootstrap.config.js @@ -0,0 +1,69 @@ +const path = require("path"); +const merge = require("webpack-merge"); + +const root = path.resolve(__dirname, "../.."); +const fills = path.join(root, "packages/ide/src/fill"); +const vsFills = path.join(root, "packages/vscode/src/fill"); + +module.exports = merge( + require(path.join(root, "scripts/webpack.node.config.js"))({ + typescriptCompilerOptions: { + target: "es5", + }, + }), { + entry: path.join(root, "lib/vscode/src/bootstrap-fork.js"), + mode: "development", + output: { + chunkFilename: "[name].bundle.js", + path: path.resolve(__dirname, "out"), + publicPath: "/", + filename: "bootstrap-fork.js", + libraryTarget: "commonjs", + globalObject: "this", + }, + // Due to the dynamic `require.context` we add to `loader.js` Webpack tries + // to include way too much. We can modify what Webpack imports in this case + // (I believe), but for now ignore some things. + module: { + rules: [{ + test: /\.(txt|d\.ts|perf\.data\.js|jxs|scpt|exe|sh|less|html|s?css|qwoff|md|svg|png|ttf|woff|eot|woff2)$/, + use: [{ + loader: "ignore-loader", + }], + }, { + test: /test|tsconfig/, + use: [{ + loader: "ignore-loader", + }], + }, { + test: /(\/vs\/code\/electron-main\/)|(\/test\/)|(OSSREADME\.json$)|(\.(test\.ts|test\.js|d\.ts|qwoff|node|html|txt|exe|wuff|md|sh|scpt|less)$)/, + use: [{ + loader: "ignore-loader", + }], + }], + noParse: /\/test\/|\.test\.jsx?|\.test\.tsx?|tsconfig.+\.json$/, + }, + resolve: { + alias: { + "gc-signals": path.join(fills, "empty.ts"), + "node-pty": path.resolve(fills, "empty.ts"), + "windows-mutex": path.resolve(fills, "empty.ts"), + "windows-process-tree": path.resolve(fills, "empty.ts"), + + "electron": path.join(vsFills, "stdioElectron.ts"), + "native-keymap": path.join(vsFills, "native-keymap.ts"), + "native-watchdog": path.join(vsFills, "native-watchdog.ts"), + "vs/base/common/amd": path.resolve(vsFills, "amd.ts"), + "vs/base/node/paths": path.resolve(vsFills, "paths.ts"), + "vs/platform/node/package": path.resolve(vsFills, "package.ts"), + "vs/platform/node/product": path.resolve(vsFills, "product.ts"), + "vs": path.resolve(root, "lib/vscode/src/vs"), + }, + }, + resolveLoader: { + alias: { + "vs/css": path.resolve(vsFills, "css.js"), + }, + }, + } +); diff --git a/packages/vscode/webpack.config.bootstrap.js b/packages/vscode/webpack.config.bootstrap.js deleted file mode 100644 index 3f9902a69..000000000 --- a/packages/vscode/webpack.config.bootstrap.js +++ /dev/null @@ -1,61 +0,0 @@ -const path = require("path"); -const webpack = require("webpack"); - -const root = path.resolve(__dirname, "../.."); -const fills = path.join(root, "packages/ide/src/fill"); -const vscodeFills = path.join(root, "packages/vscode/src/fill"); - -const merge = require("webpack-merge"); - -module.exports = (env) => { - return merge(require(path.join(root, "scripts/webpack.general.config.js"))({ - typescriptCompilerOptions: { - target: "es5", - }, - }), { - entry: path.join(root, "lib/vscode/src/bootstrap-fork.js"), - mode: "development", - target: "node", - output: { - chunkFilename: "[name].bundle.js", - path: path.resolve(__dirname, "./bin"), - publicPath: "/", - filename: "bootstrap-fork.js", - libraryTarget: "commonjs", - globalObject: "this", - }, - module: { - rules: [{ - // Ignore a bunch of file types we don't have loaders for. Also ignore - // test directories, some files with invalid JSON, and files we don't - // actually require but throw warnings or errors. This all seems to be a - // case of dynamic loading including things we won't require. - // This also results in the bundle being significantly smaller which - // makes uglify much faster. - test: /(\/vs\/code\/electron-main\/)|(\/test\/)|(OSSREADME\.json$)|(\.(test\.ts|test\.js|d\.ts|qwoff|node|html|txt|exe|wuff|md|sh|scpt|less)$)/, - use: ["ignore-loader"] - }], - }, - resolve: { - alias: { - "gc-signals": path.join(fills, "empty.ts"), - "native-keymap": path.join(fills, "native-keymap.ts"), - "windows-process-tree": path.resolve(fills, "empty.ts"), - "node-pty": path.resolve(fills, "empty.ts"), - - "electron": path.join(vscodeFills, "stdioElectron.ts"), - "native-watchdog": path.join(vscodeFills, "native-watchdog.ts"), - "vs/platform/node/product": path.resolve(vscodeFills, "product.ts"), - "vs/platform/node/package": path.resolve(vscodeFills, "package.ts"), - "vs/base/node/paths": path.resolve(vscodeFills, "paths.ts"), - "vs/base/common/amd": path.resolve(vscodeFills, "amd.ts"), - "vs": path.resolve(root, "lib/vscode/src/vs"), - }, - }, - resolveLoader: { - alias: { - "vs/css": path.resolve(vscodeFills, "css.js"), - }, - }, - }); -}; diff --git a/packages/web/webpack.common.config.js b/packages/web/webpack.common.config.js deleted file mode 100644 index a71bbc025..000000000 --- a/packages/web/webpack.common.config.js +++ /dev/null @@ -1,91 +0,0 @@ -const path = require("path"); -const HtmlWebpackPlugin = require("html-webpack-plugin"); -const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); -const PreloadWebpackPlugin = require("preload-webpack-plugin"); -const root = path.resolve(__dirname, "../.."); -const fills = path.join(root, "packages/ide/src/fill"); -const vsFills = path.join(root, "packages/vscode/src/fill"); - -const merge = require("webpack-merge"); - -module.exports = merge({ - entry: "./packages/web/src/index.ts", - output: { - chunkFilename: "[name]-[hash:6].bundle.js", - path: path.join(root, "dist"), - filename: "[hash:6].bundle.js", - }, - node: { - module: "empty", - crypto: "empty", - tls: "empty", - }, - resolve: { - alias: { - "gc-signals": path.join(fills, "empty.ts"), - "selenium-webdriver": path.join(fills, "empty.ts"), - "vscode": path.join(fills, "empty.ts"), - "vscode-fsevents": path.join(fills, "empty.ts"), - "vsda": path.join(fills, "empty.ts"), - "windows-foreground-love": path.join(fills, "empty.ts"), - "windows-mutex": path.join(fills, "empty.ts"), - "windows-process-tree": path.join(fills, "empty.ts"), - "vscode-sqlite3": path.join(fills, "empty.ts"), - "tls": path.join(fills, "empty.ts"), - "native-is-elevated": path.join(fills, "empty.ts"), - "dns": path.join(fills, "empty.ts"), - "console": path.join(fills, "empty.ts"), - "readline": path.join(fills, "empty.ts"), - "oniguruma": path.join(fills, "empty.ts"), - - // Webpack includes path-browserify but not the latest version, so - // path.posix and path.parse are undefined (among other things possibly). - // Also if we don't provide the full path, the code in vscode will import - // from vscode's node_modules which is the wrong version. - "path": path.join(root, "node_modules", "path-browserify"), - "crypto": "crypto-browserify", - "http": "http-browserify", - - "child_process": path.join(fills, "child_process.ts"), - "os": path.join(fills, "os.ts"), - "fs": path.join(fills, "fs.ts"), - "net": path.join(fills, "net.ts"), - "util": path.join(fills, "util.ts"), - "electron": path.join(fills, "electron.ts"), - - "native-keymap": path.join(vsFills, "native-keymap.ts"), - "node-pty": path.join(vsFills, "node-pty.ts"), - "graceful-fs": path.join(vsFills, "graceful-fs.ts"), - "spdlog": path.join(vsFills, "spdlog.ts"), - "native-watchdog": path.join(vsFills, "native-watchdog.ts"), - "iconv-lite": path.join(vsFills, "iconv-lite.ts"), - - "vs/base/node/paths": path.join(vsFills, "paths.ts"), - "vs/base/common/amd": path.join(vsFills, "amd.ts"), - "vs/platform/node/product": path.join(vsFills, "product.ts"), - "vs/platform/node/package": path.join(vsFills, "package.ts"), - "vs": path.join(root, "lib", "vscode", "src", "vs"), - }, - }, - resolveLoader: { - alias: { - "vs/css": path.join(vsFills, "css.js"), - }, - }, - plugins: [ - new HtmlWebpackPlugin({ - template: "packages/web/src/index.html", - }), - new PreloadWebpackPlugin({ - rel: "preload", - as: "script", - }), - ], - target: "web", -}, require(path.join(root, "scripts", "webpack.general.config.js"))({ - typescriptCompilerOptions: { - "target": "es5", - "lib": ["dom", "esnext"], - "importHelpers": true, - }, -})); diff --git a/packages/web/webpack.config.js b/packages/web/webpack.config.js index ac9546e2b..0346b0707 100644 --- a/packages/web/webpack.config.js +++ b/packages/web/webpack.config.js @@ -1,22 +1,81 @@ const path = require("path"); -const webpack = require("webpack"); const merge = require("webpack-merge"); -const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; -const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); -const prod = process.env.NODE_ENV === "production"; -module.exports = merge(require("./webpack.common.config.js"), { - devtool: prod ? "source-map" : "cheap-module-eval-source-map", - mode: prod ? "production" : "development", - output: { - path: path.join(__dirname, "out"), +const root = path.resolve(__dirname, "../.."); +const fills = path.join(root, "packages/ide/src/fill"); +const vsFills = path.join(root, "packages/vscode/src/fill"); + +module.exports = merge( + require(path.join(root, "scripts/webpack.client.config.js"))({ + entry: path.join(root, "packages/web/src/index.ts"), + template: path.join(root, "packages/web/src/index.html"), + typescriptCompilerOptions: { + "target": "es5", + "lib": ["dom", "esnext"], + "importHelpers": true, + }, + }, +), { + output: { + chunkFilename: "[name]-[hash:6].bundle.js", + path: path.join(__dirname, "out"), + filename: "[hash:6].bundle.js", + }, + node: { + module: "empty", + crypto: "empty", + tls: "empty", + }, + resolve: { + alias: { + "gc-signals": path.join(fills, "empty.ts"), + "selenium-webdriver": path.join(fills, "empty.ts"), + "vscode": path.join(fills, "empty.ts"), + "vscode-fsevents": path.join(fills, "empty.ts"), + "vsda": path.join(fills, "empty.ts"), + "windows-foreground-love": path.join(fills, "empty.ts"), + "windows-mutex": path.join(fills, "empty.ts"), + "windows-process-tree": path.join(fills, "empty.ts"), + "vscode-sqlite3": path.join(fills, "empty.ts"), + "tls": path.join(fills, "empty.ts"), + "native-is-elevated": path.join(fills, "empty.ts"), + "dns": path.join(fills, "empty.ts"), + "console": path.join(fills, "empty.ts"), + "readline": path.join(fills, "empty.ts"), + "oniguruma": path.join(fills, "empty.ts"), + + // Webpack includes path-browserify but not the latest version, so + // path.posix and path.parse are undefined (among other things possibly). + // Also if we don't provide the full path, the code in vscode will import + // from vscode's node_modules which is the wrong version. + "path": path.join(root, "node_modules", "path-browserify"), + "crypto": "crypto-browserify", + "http": "http-browserify", + + "child_process": path.join(fills, "child_process.ts"), + "os": path.join(fills, "os.ts"), + "fs": path.join(fills, "fs.ts"), + "net": path.join(fills, "net.ts"), + "util": path.join(fills, "util.ts"), + "electron": path.join(fills, "electron.ts"), + + "native-keymap": path.join(vsFills, "native-keymap.ts"), + "node-pty": path.join(vsFills, "node-pty.ts"), + "graceful-fs": path.join(vsFills, "graceful-fs.ts"), + "spdlog": path.join(vsFills, "spdlog.ts"), + "native-watchdog": path.join(vsFills, "native-watchdog.ts"), + "iconv-lite": path.join(vsFills, "iconv-lite.ts"), + + "vs/base/node/paths": path.join(vsFills, "paths.ts"), + "vs/base/common/amd": path.join(vsFills, "amd.ts"), + "vs/platform/node/product": path.join(vsFills, "product.ts"), + "vs/platform/node/package": path.join(vsFills, "package.ts"), + "vs": path.join(root, "lib", "vscode", "src", "vs"), + }, + }, + resolveLoader: { + alias: { + "vs/css": path.join(vsFills, "css.js"), + }, }, - entry: [ - "webpack-hot-middleware/client?reload=true&quiet=true", - "./packages/web/src/index.ts" - ], - plugins: [ - new webpack.HotModuleReplacementPlugin(), - // new BundleAnalyzerPlugin(), - ] }); diff --git a/scripts/webpack.client.config.js b/scripts/webpack.client.config.js new file mode 100644 index 000000000..9649b6972 --- /dev/null +++ b/scripts/webpack.client.config.js @@ -0,0 +1,58 @@ +const webpack = require("webpack"); +const path = require("path"); +const merge = require("webpack-merge"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const PreloadWebpackPlugin = require("preload-webpack-plugin"); +const HtmlWebpackPlugin = require("html-webpack-plugin"); +// const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); + +const root = path.join(__dirname, ".."); +const prod = process.env.NODE_ENV === "production"; + +module.exports = (options = {}) => merge( + require("./webpack.general.config")(options), { + devtool: prod ? "source-map" : "cheap-module-eval-source-map", + mode: prod ? "production" : "development", + entry: prod ? options.entry : [ + "webpack-hot-middleware/client?reload=true&quiet=true", + options.entry, + ], + module: { + rules: [{ + test: /\.s?css$/, + // This is required otherwise it'll fail to resolve CSS in common. + include: root, + use: [{ + loader: MiniCssExtractPlugin.loader, + }, { + loader: "css-loader", + }, { + loader: "sass-loader", + }], + }, { + test: /\.(svg|png|ttf|woff|eot|woff2)$/, + use: [{ + loader: "file-loader", + options: { + name: "[path][name].[ext]", + }, + }], + }], + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: "[name].css", + chunkFilename: "[id].css", + }), + new HtmlWebpackPlugin({ + template: options.template, + }), + new PreloadWebpackPlugin({ + rel: "preload", + as: "script", + }), + ].concat(prod ? [] : [ + new webpack.HotModuleReplacementPlugin(), + ]), + target: "web", +}); diff --git a/scripts/webpack.general.config.js b/scripts/webpack.general.config.js index 3edf05ed8..3faec9a55 100644 --- a/scripts/webpack.general.config.js +++ b/scripts/webpack.general.config.js @@ -3,13 +3,12 @@ const os = require("os"); const environment = process.env.NODE_ENV || "development"; const HappyPack = require("happypack"); const webpack = require("webpack"); -const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const root = path.join(__dirname, ".."); module.exports = (options = {}) => ({ context: root, - devtool: "source-map", + devtool: "none", module: { rules: [{ loader: "string-replace-loader", @@ -32,22 +31,6 @@ module.exports = (options = {}) => ({ flags: "g", }], }, - }, { - test: /\.(js|css)/, - exclude: /test/, - }, { - test: /\.(txt|d\.ts|test.ts|perf.data.js|jxs|scpt|exe|sh|less)$/, - use: [{ - loader: "ignore-loader", - }], - }, { - // These are meant to run in separate pages, like the issue reporter or - // process explorer. Ignoring for now since otherwise their CSS is - // included in the main CSS. - test: /test|electron-browser.+\.html$|code\/electron-browser\/.+\.css$/, - use: [{ - loader: "ignore-loader", - }], }, { test: /\.node$/, use: "node-loader", @@ -56,37 +39,11 @@ module.exports = (options = {}) => ({ loader: "happypack/loader?id=ts", }], test: /(^.?|\.[^d]|[^.]d|[^.][^d])\.tsx?$/, - }, { - // Test CSS isn't required. The rest is supposed to be served in separate - // pages or iframes so we don't need to include it here. Also excluding - // markdown.css because even though it uses the file-loader as shown above - // in the string replace, it's still making its way into the main CSS. - exclude: /test|code\/electron-browser\/.+\.css$/, - test: /\.s?css$/, - // This is required otherwise it'll fail to resolve CSS in common. - include: root, - use: [{ - loader: MiniCssExtractPlugin.loader, - }, { - loader: "css-loader", - }, { - loader: "sass-loader", - }], - }, { - test: /\.(svg|png|ttf|woff|eot|woff2)$/, - use: [{ - loader: "file-loader", - options: { - name: "[path][name].[ext]", - }, - }], }, { test: /\.wasm$/, type: "javascript/auto", }, { - /** - * Fixes spdlog - */ + // Fixes spdlog. test: /spdlog\/index\.js/, loader: "string-replace-loader", options: { @@ -118,7 +75,6 @@ module.exports = (options = {}) => ({ }], }, }], - noParse: /\/test\/|\.test\.jsx?|\.test\.tsx?|tsconfig.+\.json$/, }, resolve: { alias: { @@ -151,12 +107,7 @@ module.exports = (options = {}) => ({ "process.env.NODE_ENV": `"${environment}"`, "process.env.LOG_LEVEL": `"${process.env.LOG_LEVEL || ""}"`, }), - new MiniCssExtractPlugin({ - filename: "[name].css", - chunkFilename: "[id].css", - }), ], - // target: "web", stats: { all: false, // Fallback for options not defined. errors: true, diff --git a/scripts/webpack.node.config.js b/scripts/webpack.node.config.js new file mode 100644 index 000000000..c16c9b110 --- /dev/null +++ b/scripts/webpack.node.config.js @@ -0,0 +1,8 @@ +const merge = require("webpack-merge"); + +module.exports = (options = {}) => merge( + require("./webpack.general.config")(options), { + devtool: "none", + mode: "production", + target: "node", +});