var path = require('path'); var webpack = require('webpack'); var MiniCssExtractPlugin = require('mini-css-extract-plugin'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = (env, argv) => { const isDevServer = (env || {}).devServer === true; const isDevelopment = argv.mode === 'development'; const outputDirectory = isDevServer ? "dist-dev" : "dist"; const entries = {}; entries[`${outputDirectory}/engine`] = "./src/engine.jsx"; entries[`${outputDirectory}/engineStyle`] = "./src/engineStyle.js"; const statsConfig = { builtAt: true, children: false, chunks: false, chunkGroups: false, chunkModules: false, chunkOrigins: false, colors: true, entrypoints: true, } return { plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV': isDevelopment ? "\"development\"" : "\"production\"", }), // http://stackoverflow.com/questions/29080148/expose-jquery-to-real-window-object-with-webpack new webpack.ProvidePlugin({ // Automtically detect jQuery and $ as free var in modules // and inject the jquery library // This is required by many jquery plugins jquery: "jquery", jQuery: "jquery", $: "jquery", }), new HtmlWebpackPlugin({ title: "Bitburner" + (isDevelopment ? ' - development' : ""), template: "src/index.html", favicon: "favicon.ico", googleAnalytics: { trackingId: 'UA-100157497-1', }, meta: {}, minify: isDevelopment ? false : { collapseBooleanAttributes: true, collapseInlineTagWhitespace: false, collapseWhitespace: false, conservativeCollapse: false, html5: true, includeAutoGeneratedTags: false, keepClosingSlash: true, minifyCSS: false, minifyJS: false, minifyURLs: false, preserveLineBreaks: false, preventAttributesEscaping: false, processConditionalComments: false, quoteCharacter: "\"", removeAttributeQuotes: false, removeComments: false, removeEmptyAttributes: false, removeEmptyElements: false, removeOptionalTags: false, removeScriptTypeAttributes: false, removeStyleLinkTypeAttributes: false, removeTagWhitespace: false, sortAttributes: false, sortClassName: false, useShortDoctype: false, }, }), new MiniCssExtractPlugin({ filename: "[name].css", }), ], target: "web", entry: entries, devtool: "source-map", output: { path: path.resolve(__dirname, "./"), filename: "[name].bundle.js", }, module: { rules: [ { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/, }, { test: /\.(jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader", }, }, { test: /\.s?css$/, use: [ MiniCssExtractPlugin.loader, "css-loader", "sass-loader", ], }, ], }, optimization: { removeAvailableModules: true, removeEmptyChunks: true, mergeDuplicateChunks: true, flagIncludedChunks: true, occurrenceOrder: true, sideEffects: true, providedExports: true, usedExports: true, concatenateModules: false, namedModules: false, namedChunks: false, minimize: !isDevelopment, portableRecords: true, splitChunks: { cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: `${outputDirectory}/vendor`, chunks: 'all', }, }, }, }, devServer: { port: 8000, publicPath: `/`, stats: statsConfig, }, resolve: { extensions: [ ".tsx", ".ts", ".js", ".jsx", ], }, stats: statsConfig, }; };