Guest User

webpack.config.renderer.dev.babel.js

a guest
Mar 25th, 2021
1,277
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import path from 'path';
  2. import fs from 'fs';
  3. import webpack from 'webpack';
  4. import chalk from 'chalk';
  5. import { merge } from 'webpack-merge';
  6. import { spawn, execSync } from 'child_process';
  7. import baseConfig from './webpack.config.base';
  8. import CheckNodeEnv from '../scripts/CheckNodeEnv';
  9. import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
  10.  
  11. // When an ESLint server is running, we can't set the NODE_ENV so we'll check if it's
  12. // at the dev webpack config is not accidentally run in a production environment
  13. if (process.env.NODE_ENV === 'production') {
  14.   CheckNodeEnv('development');
  15. }
  16.  
  17. const port = process.env.PORT || 1212;
  18. const publicPath = `http://localhost:${port}/dist`;
  19. const dllDir = path.join(__dirname, '../dll');
  20. const manifest = path.resolve(dllDir, 'renderer.json');
  21. const requiredByDLLConfig = module.parent.filename.includes(
  22.   'webpack.config.renderer.dev.dll'
  23. );
  24.  
  25. /**
  26.  * Warn if the DLL is not built
  27.  */
  28. if (!requiredByDLLConfig && !(fs.existsSync(dllDir) && fs.existsSync(manifest))) {
  29.   console.log(
  30.     chalk.black.bgYellow.bold(
  31.       'The DLL files are missing. Sit back while we build them for you with "yarn build-dll"'
  32.     )
  33.   );
  34.   execSync('yarn build-dll');
  35. }
  36.  
  37. export default merge(baseConfig, {
  38.   devtool: 'inline-source-map',
  39.  
  40.   mode: 'development',
  41.  
  42.   target: 'electron-renderer',
  43.  
  44.   entry: [
  45.     'core-js',
  46.     'regenerator-runtime/runtime',
  47.     require.resolve('../../src/index.tsx'),
  48.   ],
  49.  
  50.   output: {
  51.     publicPath: `http://localhost:${port}/dist/`,
  52.     filename: 'renderer.dev.js',
  53.   },
  54.  
  55.   module: {
  56.     rules: [
  57.       {
  58.         test: /\.[jt]sx?$/,
  59.         exclude: /node_modules/,
  60.         use: [
  61.           {
  62.             loader: require.resolve('babel-loader'),
  63.             options: {
  64.               plugins: [
  65.                 require.resolve('react-refresh/babel'),
  66.               ].filter(Boolean),
  67.             },
  68.           },
  69.         ],
  70.       },
  71.       {
  72.         test: /\.global\.css$/,
  73.         use: [
  74.           {
  75.             loader: 'style-loader',
  76.           },
  77.           {
  78.             loader: 'css-loader',
  79.             options: {
  80.               sourceMap: true,
  81.             },
  82.           },
  83.           {
  84.             loader: 'postcss-loader',
  85.             options: {
  86.               postcssOptions: {
  87.                 plugins: [require('tailwindcss'), require('autoprefixer')],
  88.               },
  89.             }
  90.           }
  91.         ],
  92.       },
  93.       {
  94.         test: /^((?!\.global).)*\.css$/,
  95.         use: [
  96.           {
  97.             loader: 'style-loader',
  98.           },
  99.           {
  100.             loader: 'css-loader',
  101.             options: {
  102.               modules: {
  103.                 localIdentName: '[name]__[local]__[hash:base64:5]',
  104.               },
  105.               sourceMap: true,
  106.               importLoaders: 1,
  107.             },
  108.           },
  109.         ],
  110.       },
  111.       // SASS support - compile all .global.scss files and pipe it to style.css
  112.       {
  113.         test: /\.global\.(scss|sass)$/,
  114.         use: [
  115.           {
  116.             loader: 'style-loader',
  117.           },
  118.           {
  119.             loader: 'css-loader',
  120.             options: {
  121.               sourceMap: true,
  122.             },
  123.           },
  124.           {
  125.             loader: 'sass-loader',
  126.           },
  127.         ],
  128.       },
  129.       // SASS support - compile all other .scss files and pipe it to style.css
  130.       {
  131.         test: /^((?!\.global).)*\.(scss|sass)$/,
  132.         use: [
  133.           {
  134.             loader: 'style-loader',
  135.           },
  136.           {
  137.             loader: '@teamsupercell/typings-for-css-modules-loader',
  138.           },
  139.           {
  140.             loader: 'css-loader',
  141.             options: {
  142.               modules: {
  143.                 localIdentName: '[name]__[local]__[hash:base64:5]',
  144.               },
  145.               sourceMap: true,
  146.               importLoaders: 1,
  147.             },
  148.           },
  149.           {
  150.             loader: 'sass-loader',
  151.           },
  152.         ],
  153.       },
  154.       // WOFF Font
  155.       {
  156.         test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
  157.         use: {
  158.           loader: 'url-loader',
  159.           options: {
  160.             limit: 10000,
  161.             mimetype: 'application/font-woff',
  162.           },
  163.         },
  164.       },
  165.       // WOFF2 Font
  166.       {
  167.         test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
  168.         use: {
  169.           loader: 'url-loader',
  170.           options: {
  171.             limit: 10000,
  172.             mimetype: 'application/font-woff',
  173.           },
  174.         },
  175.       },
  176.       // OTF Font
  177.       {
  178.         test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
  179.         use: {
  180.           loader: 'url-loader',
  181.           options: {
  182.             limit: 10000,
  183.             mimetype: 'font/otf',
  184.           },
  185.         },
  186.       },
  187.       // TTF Font
  188.       {
  189.         test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
  190.         use: {
  191.           loader: 'url-loader',
  192.           options: {
  193.             limit: 10000,
  194.             mimetype: 'application/octet-stream',
  195.           },
  196.         },
  197.       },
  198.       // EOT Font
  199.       {
  200.         test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
  201.         use: 'file-loader',
  202.       },
  203.       // SVG Font
  204.       {
  205.         test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  206.         use: {
  207.           loader: 'url-loader',
  208.           options: {
  209.             limit: 10000,
  210.             mimetype: 'image/svg+xml',
  211.           },
  212.         },
  213.       },
  214.       // Common Image Formats
  215.       {
  216.         test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
  217.         use: 'url-loader',
  218.       },
  219.     ],
  220.   },
  221.   plugins: [
  222.  
  223.     requiredByDLLConfig
  224.       ? null
  225.       : new webpack.DllReferencePlugin({
  226.           context: path.join(__dirname, '../dll'),
  227.           manifest: require(manifest),
  228.           sourceType: 'var',
  229.         }),
  230.  
  231.     new webpack.NoEmitOnErrorsPlugin(),
  232.  
  233.     /**
  234.      * Create global constants which can be configured at compile time.
  235.      *
  236.      * Useful for allowing different behaviour between development builds and
  237.      * release builds
  238.      *
  239.      * NODE_ENV should be production so that modules do not perform certain
  240.      * development checks
  241.      *
  242.      * By default, use 'development' as NODE_ENV. This can be overriden with
  243.      * 'staging', for example, by changing the ENV variables in the npm scripts
  244.      */
  245.     new webpack.EnvironmentPlugin({
  246.       NODE_ENV: 'development',
  247.     }),
  248.  
  249.     new webpack.LoaderOptionsPlugin({
  250.       debug: true,
  251.     }),
  252.  
  253.     new ReactRefreshWebpackPlugin(),
  254.   ],
  255.  
  256.   node: {
  257.     __dirname: false,
  258.     __filename: false,
  259.   },
  260.  
  261.   devServer: {
  262.     port,
  263.     publicPath,
  264.     compress: true,
  265.     noInfo: false,
  266.     stats: 'errors-only',
  267.     inline: true,
  268.     lazy: false,
  269.     hot: true,
  270.     headers: { 'Access-Control-Allow-Origin': '*' },
  271.     contentBase: path.join(__dirname, 'dist'),
  272.     watchOptions: {
  273.       aggregateTimeout: 300,
  274.       ignored: /node_modules/,
  275.       poll: 100,
  276.     },
  277.     historyApiFallback: {
  278.       verbose: true,
  279.       disableDotRule: false,
  280.     },
  281.     before() {
  282.       console.log('Starting Main Process...');
  283.         spawn('npm', ['run', 'start:main'], {
  284.           shell: true,
  285.           env: process.env,
  286.           stdio: 'inherit',
  287.         })
  288.           .on('close', (code) => process.exit(code))
  289.           .on('error', (spawnError) => console.error(spawnError));
  290.     },
  291.   },
  292. });
Add Comment
Please, Sign In to add comment