github.com/oinume/lekcije@v0.0.0-20231017100347-5b4c5eb6ab24/frontend/webpack.config.js (about)

     1  'use strict';
     2  
     3  const process = require('process');
     4  const path = require('path');
     5  const buildPath = path.resolve(__dirname, 'static');
     6  const nodeModulesPath = path.resolve(__dirname, 'node_modules');
     7  const CopyWebpackPlugin = require('copy-webpack-plugin');
     8  //const TransferWebpackPlugin = require('transfer-webpack-plugin'); // dev-server only
     9  let devtool = 'source-map'; // Render source-map file for final build
    10  const plugins = [
    11    new CopyWebpackPlugin({
    12      patterns: [
    13        { context: '.', from: 'css/**/*.css' },
    14        { context: '.', from: 'html/**/*.html' },
    15        { context: '.', from: 'image/**/*.png' },
    16        { context: '.', from: 'image/**/*.svg' },
    17        { context: '.', from: 'lib/**' },
    18        { context: nodeModulesPath, from: 'bootstrap/dist/**', to: 'lib' },
    19        { context: nodeModulesPath, from: 'bootstrap-icons/**', to: 'lib' },
    20        { context: nodeModulesPath, from: 'bootswatch/dist/yeti/**', to: 'lib' },
    21        { context: nodeModulesPath, from: 'react/umd/**', to: 'lib' },
    22        { context: nodeModulesPath, from: 'react-dom/umd/**', to: 'lib' },
    23      ],
    24    }),
    25  ];
    26  
    27  if (process.env.WEBPACK_DEV_SERVER === 'true') {
    28    console.log('WEBPACK_DEV_SERVER is true');
    29    devtool = 'eval';
    30  }
    31  
    32  const config = {
    33    mode: process.env.MINIFY === 'true' ? 'production' : 'development',
    34    entry: {
    35      main: './src/main.tsx',
    36      me: './src/me.tsx',
    37      setting: './src/setting.tsx',
    38    },
    39    resolve: {
    40      // When using require, do not have to add these extensions to file's name
    41      extensions: ['.js', '.jsx', '.json', '.css', '.ts', '.tsx'],
    42      modules: ['web_modules', 'node_modules'] // (Default Settings)
    43    },
    44    output: {
    45      path: path.join(buildPath, process.env.VERSION_HASH),
    46      publicPath: path.join('/static', process.env.VERSION_HASH),
    47      filename: 'js/[name].bundle.js',
    48    },
    49    externals: {
    50      react: 'React',
    51      'react-dom': 'ReactDOM',
    52      bootstrap: 'bootstrap',
    53      bootswatch: 'bootswatch',
    54    },
    55    optimization: {
    56      runtimeChunk: {
    57        name: 'vendor',
    58      },
    59      splitChunks: {
    60        name: 'vendor',
    61        chunks: 'initial',
    62      },
    63    },
    64    plugins: plugins,
    65    module: {
    66      rules: [
    67        {
    68          test: /\.(js|jsx)$/,
    69          //include: paths.appSrc,
    70          loader: require.resolve('babel-loader'),
    71          exclude: /node_modules/,
    72          options: {
    73            // This is a feature of `babel-loader` for Webpack (not Babel itself).
    74            // It enables caching results in ./node_modules/.cache/babel-loader/
    75            // directory for faster rebuilds.
    76            cacheDirectory: true,
    77            //plugins: ['react-hot-loader/babel'],
    78            presets: [
    79              ['@babel/react'],
    80              [
    81                '@babel/env',
    82                {
    83                  targets: {
    84                    browsers: ['last 2 versions', 'safari >= 7'],
    85                  },
    86                },
    87              ],
    88            ],
    89          },
    90        },
    91        {
    92          test: /\.tsx?$/,
    93          use: 'ts-loader',
    94        },
    95        {
    96          test: /\.css$/,
    97          use: ['style-loader', 'css-loader'],
    98        },
    99        {
   100          test: /\.png$/,
   101          use: 'url-loader?limit=100000',
   102        },
   103        {
   104          test: /\.jpg$/,
   105          use: 'file-loader',
   106        },
   107        {
   108          test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
   109          use: 'url?limit=10000&mimetype=application/font-woff',
   110        },
   111        {
   112          test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
   113          use: 'url?limit=10000&mimetype=application/octet-stream',
   114        },
   115        {
   116          test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
   117          use: 'file',
   118        },
   119        {
   120          test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
   121          use: 'url?limit=10000&mimetype=image/svg+xml',
   122        },
   123      ],
   124    },
   125    // Dev server Configuration options
   126    devServer: {
   127      //    contentBase: 'frontend', // Relative directory for base of server
   128      hot: true, // Live-reload
   129      port: 4000,
   130      host: '0.0.0.0', // Change to '0.0.0.0' for external facing server
   131      proxy: {
   132        '*': {
   133          target: 'http://localhost:4001',
   134          secure: false,
   135          // bypass: function (req, res, proxyOptions) {
   136          //     const accept = req.headers.accept
   137          //     console.log(accept);
   138          //     //if (accept.indexOf('html') !== -1 || accept.indexOf('js') !== -1 || accept.indexOf('css') !== -1) {
   139          //         console.log('Skipping proxy for browser request.');
   140          //         return false;
   141          //     //}
   142          // }
   143        },
   144      },
   145      static: {
   146        directory: path.resolve(__dirname, '.'),
   147      },
   148    },
   149  };
   150  
   151  module.exports = config;