fix: webpack build .env file

Chia-Network · Oct 17, 2022 · 1bcd432 · 1bcd432
1 parent 8f393cd
commit 1bcd432
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 88 deletions.
diff --git a/package.json b/package.json
@@ -22,7 +22,7 @@
     "locale:extract": "lingui extract",
     "locale:compile": "lingui compile",
     "locale": "lingui extract && lingui compile",
-    "packaging": "electron-builder build --mac --win -c.extraMetadata.main=build/electron/main.js --publish never"
+    "packaging": "electron-builder build --mac -c.extraMetadata.main=build/electron/main.js --publish never"
   },
   "dependencies": {
     "@chia/api": "./packages/api",
@@ -124,6 +124,7 @@
     "copy-webpack-plugin": "10.2.0",
     "cross-env": "7.0.3",
     "css-loader": "6.5.1",
+    "dotenv-webpack": "^8.0.1",
     "electron": "^20.0.2",
     "electron-builder": "^23.3.3",
     "electron-winstaller": "5.0.0",

diff --git a/src/index.tsx b/src/index.tsx
@@ -1,5 +1,4 @@
 import App from '@/App'
-import '@/config/env'
 import '@/polyfill'
 import ReactDOM from 'react-dom'
 

diff --git a/webpack.react.babel.ts b/webpack.react.babel.ts
@@ -1,46 +1,56 @@
-import webpack from 'webpack';
-import path from 'path';
-import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
-import LoadablePlugin from '@loadable/webpack-plugin';
-import TerserPlugin from 'terser-webpack-plugin';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import LodashModuleReplacementPlugin from 'lodash-webpack-plugin';
+import LoadablePlugin from '@loadable/webpack-plugin'
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import LodashModuleReplacementPlugin from 'lodash-webpack-plugin'
+import path from 'path'
+import TerserPlugin from 'terser-webpack-plugin'
+import webpack from 'webpack'
+const Dotenv = require('dotenv-webpack')
 
-const PORT = 3000;
-const CONTEXT = __dirname;
-const DEV = process.env.NODE_ENV !== 'production';
+const PORT = 3000
+const CONTEXT = __dirname
+const DEV = process.env.NODE_ENV !== 'production'
 
 const babelQuery = {
   babelrc: false,
   presets: [
-    ['@babel/preset-env', {
-      useBuiltIns: 'entry',
-      corejs: 3,
-    }],
+    [
+      '@babel/preset-env',
+      {
+        useBuiltIns: 'entry',
+        corejs: 3,
+      },
+    ],
     '@babel/preset-typescript',
-    ["@babel/preset-react", {
-      "runtime": "automatic"
-    }]
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
   ],
   plugins: [
     'lodash',
     '@loadable/babel-plugin',
     'babel-plugin-styled-components',
-    ['babel-plugin-transform-imports', {
-      '@material-ui/core': {
-        // Use "transform: '@material-ui/core/${member}'," if your bundler does not support ES modules
-        'transform': '@material-ui/core/${member}',
-        'preventFullImport': true,
-      },
-      '@material-ui/icons': {
-        // Use "transform: '@material-ui/icons/${member}'," if your bundler does not support ES modules
-        'transform': '@material-ui/icons/${member}',
-        'preventFullImport': true,
+    [
+      'babel-plugin-transform-imports',
+      {
+        '@material-ui/core': {
+          // Use "transform: '@material-ui/core/${member}'," if your bundler does not support ES modules
+          transform: '@material-ui/core/${member}',
+          preventFullImport: true,
+        },
+        '@material-ui/icons': {
+          // Use "transform: '@material-ui/icons/${member}'," if your bundler does not support ES modules
+          transform: '@material-ui/icons/${member}',
+          preventFullImport: true,
+        },
       },
-    }],
+    ],
     DEV && require.resolve('react-refresh/babel'),
   ].filter(Boolean),
-};
+}
 
 export default {
   mode: DEV ? 'development' : 'production',
@@ -49,26 +59,28 @@ export default {
   entry: path.join(CONTEXT, '/src/index'),
   target: 'electron-renderer',
   stats: 'errors-only',
-  devServer: DEV ? {
-    client: {
-      overlay: false,
-    },
-    static: {
-      directory: path.join(__dirname, '../dist/renderer'),
-    },
-    historyApiFallback: true,
-    compress: true,
-    hot: true,
-    port: PORT,
-    devMiddleware: {
-      publicPath: '/',
-    },
-  } : undefined,
+  devServer: DEV
+    ? {
+        client: {
+          overlay: false,
+        },
+        static: {
+          directory: path.join(__dirname, '../dist/renderer'),
+        },
+        historyApiFallback: true,
+        compress: true,
+        hot: true,
+        port: PORT,
+        devMiddleware: {
+          publicPath: '/',
+        },
+      }
+    : undefined,
   output: {
     path: path.resolve(__dirname, './build/renderer'),
     filename: 'js/[name].js',
     publicPath: './',
-    hashFunction: "sha256",
+    hashFunction: 'sha256',
   },
   resolve: {
     extensions: ['.wasm', '.mjs', '.ts', '.tsx', '.js', '.jsx', '.json'],
@@ -113,6 +125,9 @@ export default {
     ],
   },
   plugins: [
+    new Dotenv({
+      path: './.env',
+    }),
     new LoadablePlugin(),
     new LodashModuleReplacementPlugin({
       paths: true,
@@ -121,7 +136,9 @@ export default {
       collections: true,
     }),
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(DEV ? 'development' : 'production'),
+      'process.env.NODE_ENV': JSON.stringify(
+        DEV ? 'development' : 'production'
+      ),
       'process.env.BROWSER': true,
       IS_BROWSER: true,
     }),
@@ -132,49 +149,60 @@ export default {
     DEV && new ReactRefreshWebpackPlugin(),
   ].filter(Boolean),
   module: {
-    rules: [{
-      test: function(path){
-        return DEV ? /\.js$/.test(path) : false;
+    rules: [
+      {
+        test: function (path) {
+          return DEV ? /\.js$/.test(path) : false
+        },
+        enforce: 'pre',
+        use: ['source-map-loader'],
+      },
+      {
+        test: /node_modules[\/\\](iconv-lite)[\/\\].+/,
+        resolve: {
+          aliasFields: ['main'],
+        },
+      },
+      {
+        test: /\.mjs$/,
+        include: /node_modules/,
+        type: 'javascript/auto',
       },
-      enforce: "pre",
-      use: ["source-map-loader"],
-    }, {
-      test: /node_modules[\/\\](iconv-lite)[\/\\].+/,
-      resolve: {
-        aliasFields: ['main'],
+      {
+        test: /\.[jt]sx?$/,
+        exclude: DEV ? /node_modules/ : undefined,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: babelQuery,
+          },
+        ],
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
       },
-    }, {
-      test: /\.mjs$/,
-      include: /node_modules/,
-      type: 'javascript/auto',
-    }, {
-      test: /\.[jt]sx?$/,
-      exclude: DEV ? /node_modules/ : undefined,
-      use: [{
-        loader: 'babel-loader',
-        options: babelQuery,
-      }],
-    }, {
-      test: /\.css$/i,
-      use: ['style-loader', 'css-loader'],
-    }, {
-      test: /\.(woff|woff2?|ttf|eot)$/,
-      type: 'asset',
-      parser: {
-        dataUrlCondition: {
-          maxSize: 10000,
+      {
+        test: /\.(woff|woff2?|ttf|eot)$/,
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10000,
+          },
         },
+        generator: {
+          filename: '[name]-[contenthash:8][ext]',
+        },
+      },
+      {
+        test: /\.svg$/,
+        issuer: /\.[jt]sx?$/,
+        use: ['@svgr/webpack'],
       },
-      generator: {
-        filename: '[name]-[contenthash:8][ext]',
+      {
+        test: /\.(gif|png|jpe?g|ico|icns)$/i,
+        type: 'asset/resource',
       },
-    }, {
-      test: /\.svg$/,
-      issuer: /\.[jt]sx?$/,
-      use: ['@svgr/webpack'],
-    }, {
-      test: /\.(gif|png|jpe?g|ico|icns)$/i,
-      type: 'asset/resource',
-    }],
+    ],
   },
-};
+}