/** */ import path from 'path'; import webpack from 'webpack'; import AssetsPlugin from 'assets-webpack-plugin'; import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer'; import pkg from './package.json'; const isDebug = process.argv.includes('--debug'); const VERBOSE = false; const isAnalyze = process.argv.includes('--analyze') || process.argv.includes('--analyse'); const babelPlugins = [ '@babel/transform-flow-strip-types', ['@babel/plugin-proposal-decorators', { legacy: true }], '@babel/plugin-proposal-function-sent', '@babel/plugin-proposal-export-namespace-from', '@babel/plugin-proposal-numeric-separator', '@babel/plugin-proposal-throw-expressions', ['@babel/plugin-proposal-class-properties', { loose: true }], '@babel/proposal-object-rest-spread', // react-optimize '@babel/transform-react-constant-elements', '@babel/transform-react-inline-elements', 'transform-react-remove-prop-types', 'transform-react-pure-class-to-function', ]; export default { name: 'client', target: 'web', context: __dirname, mode: (isDebug) ? 'development' : 'production', devtool: 'source-map', entry: { client: ['./src/client.js'], globe: ['./src/globe.js'], }, output: { path: path.resolve(__dirname, './build/public/assets'), publicPath: '/assets/', pathinfo: VERBOSE, filename: isDebug ? '[name].js' : '[name].[chunkhash:8].js', chunkFilename: isDebug ? '[name].chunk.js' : '[name].[chunkhash:8].js', }, resolve: { extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'], }, module: { rules: [ { test: /\.svg$/, use: [ { loader: 'babel-loader', }, { loader: 'react-svg-loader', options: { svgo: { plugins: [ { removeViewBox: false, }, { removeDimensions: true, }, ], }, jsx: false, }, }, ], }, { test: /\.(js|jsx|ts|tsx)$/, loader: 'babel-loader', include: [ path.resolve(__dirname, './src'), ], options: { cacheDirectory: isDebug, babelrc: false, presets: [ ['@babel/preset-env', { targets: { browsers: pkg.browserslist, }, modules: false, useBuiltIns: 'usage', corejs: { version: 3, }, debug: false, }], '@babel/typescript', '@babel/react', ], plugins: babelPlugins, }, }, { test: /\.css/, use: ['style-loader', { loader: 'css-loader', options: { sourceMap: isDebug, modules: false, }, }, ], }, ], }, plugins: [ // Define free variables // https://webpack.github.io/docs/list-of-plugins.html#defineplugin new webpack.DefinePlugin({ 'process.env.NODE_ENV': isDebug ? '"development"' : '"production"', 'process.env.BROWSER': true, }), // Emit a file with assets paths // https://github.com/sporto/assets-webpack-plugin#options new AssetsPlugin({ path: path.resolve(__dirname, './build'), filename: 'assets.json', prettyPrint: true, }), // Webpack Bundle Analyzer // https://github.com/th0r/webpack-bundle-analyzer ...isAnalyze ? [new BundleAnalyzerPlugin()] : [], ], optimization: { splitChunks: { chunks: 'all', name: false, cacheGroups: { default: false, defaultVendors: false, vendor: { name: 'vendor', chunks: (chunk) => chunk.name === 'client', test: /node_modules/, }, three: { test: /[\\/]node_modules[\\/]three[\\/]/, name: 'three', chunks: 'all', }, }, }, }, bail: !isDebug, cache: isDebug, };