Attempt to use dream2nix and vite
This commit is contained in:
Matei Adriel
parent
c31d69df1b
commit
fed8fdcf86
25
.github/workflows/deploy.yaml
vendored
Normal file
25
.github/workflows/deploy.yaml
vendored
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
name: "Deploy"
|
||||||
|
on:
|
||||||
|
pull_request:
|
||||||
|
push:
|
||||||
|
jobs:
|
||||||
|
tests:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- uses: actions/checkout@v3
|
||||||
|
- uses: cachix/install-nix-action@v19
|
||||||
|
with:
|
||||||
|
github_access_token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
- uses: cachix/cachix-action@v12
|
||||||
|
with:
|
||||||
|
name: erratic-gate
|
||||||
|
authToken: '${{ secrets.CACHIX_AUTH_TOKEN }}'
|
||||||
|
|
||||||
|
- run: nix build
|
||||||
|
- run: nix flake check
|
||||||
|
|
||||||
|
- name: Deploy
|
||||||
|
uses: peaceiris/actions-gh-pages@v3
|
||||||
|
with:
|
||||||
|
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
publish_dir: ./dist
|
||||||
|
|
@ -1,18 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
presets: [
|
|
||||||
'@babel/preset-env',
|
|
||||||
'@babel/preset-react',
|
|
||||||
'@babel/preset-typescript'
|
|
||||||
],
|
|
||||||
plugins: [
|
|
||||||
'@babel/plugin-proposal-optional-chaining',
|
|
||||||
'@babel/plugin-syntax-dynamic-import',
|
|
||||||
['@babel/plugin-proposal-decorators', { legacy: true }],
|
|
||||||
['@babel/plugin-proposal-class-properties', { loose: true }]
|
|
||||||
],
|
|
||||||
env: {
|
|
||||||
test: {
|
|
||||||
presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
1758
dream2nix-packages/erratic-gate/dream-lock.json
Normal file
1758
dream2nix-packages/erratic-gate/dream-lock.json
Normal file
File diff suppressed because it is too large
Load diff
16
flake.nix
16
flake.nix
|
|
@ -1,10 +1,22 @@
|
||||||
{
|
{
|
||||||
inputs.dream2nix.url = "github:nix-community/dream2nix";
|
inputs.dream2nix.url = "github:nix-community/dream2nix";
|
||||||
outputs = inp:
|
outputs = inputs:
|
||||||
inp.dream2nix.lib.makeFlakeOutputs {
|
inputs.dream2nix.lib.makeFlakeOutputs {
|
||||||
systems = [ "x86_64-linux" ];
|
systems = [ "x86_64-linux" ];
|
||||||
config.projectRoot = ./.;
|
config.projectRoot = ./.;
|
||||||
source = ./.;
|
source = ./.;
|
||||||
projects = ./projects.toml;
|
projects = ./projects.toml;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
# {{{ Caching and whatnot
|
||||||
|
nixConfig = {
|
||||||
|
# extra-substituters = [
|
||||||
|
# "erratic-gate.cachix.org-1:Ijiu/v//aVpKO4xBqV+2AM2s2uQYOnGCfoj9fYRXxtk" # I think I need this for neovim-nightly?
|
||||||
|
# ];
|
||||||
|
#
|
||||||
|
# extra-trusted-public-keys = [
|
||||||
|
# "nix-community.cachix.org-1:mB9FSh9qf2dCimDSUo8Zy7bkq5CX+/rkCWyvRCYg3Fs="
|
||||||
|
# ];
|
||||||
|
};
|
||||||
|
# }}}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
64
index.html
Normal file
64
index.html
Normal file
|
|
@ -0,0 +1,64 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<title>Logic gate simulator</title>
|
||||||
|
|
||||||
|
<meta name="pinterest" content="nopin" />
|
||||||
|
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||||
|
/>
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css?family=Righteous&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<meta property="og:title" content="Logic gate simulator" />
|
||||||
|
<meta property="og:description" content="A logic gate simulator made for infoeducatie 2019" />
|
||||||
|
<meta property="og:url" content="https://mateiadrielrafael.github.io/logic-gate-simulator/" />
|
||||||
|
|
||||||
|
<meta
|
||||||
|
name="Description"
|
||||||
|
content="A logic gate simulator made for infoeducatie 2019"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body
|
||||||
|
ondragstart="return false;"
|
||||||
|
ondrop="return false;"
|
||||||
|
oncontextmenu="return false"
|
||||||
|
>
|
||||||
|
<!--The react app is rendered here-->
|
||||||
|
<div id="app"></div>
|
||||||
|
|
||||||
|
<!--The splash screen structure-->
|
||||||
|
<div class="Splash">
|
||||||
|
<!--Loading animation-->
|
||||||
|
<div class="loading">
|
||||||
|
<div class="lds-ripple">
|
||||||
|
<div></div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--In case someone tries to laod this with js disabled-->
|
||||||
|
<noscript> JavaScript must be enabled to run this app. </noscript>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script type="module" src="/src/index.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
11357
package-lock.json
generated
11357
package-lock.json
generated
File diff suppressed because it is too large
Load diff
93
package.json
93
package.json
|
|
@ -1,64 +1,33 @@
|
||||||
{
|
{
|
||||||
"name": "logic-gate-simulator",
|
"name": "erratic-gate",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"main": "./src/index.ts",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "webpack-dev-server --open --mode development",
|
"dev": "vite",
|
||||||
"build": "cross-env NODE_ENV=production webpack",
|
"build": "vite build",
|
||||||
"build:server": "cross-env NODE_ENV=server webpack",
|
"check": "tsc",
|
||||||
"show": "gource -f --start-date \"2019-07-01 12:00\" --key --hide dirnames,filenames,bloom -s 0.3",
|
"preview": "vite preview"
|
||||||
"start": "node ./dist/server"
|
},
|
||||||
},
|
"devDependencies": {
|
||||||
"devDependencies": {
|
"@types/deepmerge": "^2.2.0",
|
||||||
"@babel/core": "^7.5.5",
|
"@types/mainloop.js": "^1.0.5",
|
||||||
"@babel/plugin-proposal-class-properties": "^7.5.5",
|
"@types/node": "^1.0.5",
|
||||||
"@babel/plugin-proposal-decorators": "^7.4.4",
|
"@types/react-router-dom": "^4.3.4",
|
||||||
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
|
"@vitejs/plugin-react": "^4.0.0-beta.0",
|
||||||
"@babel/preset-env": "^7.5.5",
|
"typescript": "^5.0.2",
|
||||||
"@babel/preset-react": "^7.0.0",
|
"vite": "^4.3.0"
|
||||||
"@babel/preset-typescript": "^7.3.3",
|
},
|
||||||
"@types/deepmerge": "^2.2.0",
|
"dependencies": {
|
||||||
"@types/express": "^4.17.0",
|
"@eix-js/utils": "0.0.6",
|
||||||
"@types/gh-pages": "^2.0.0",
|
"@material-ui/core": "^4.2.1",
|
||||||
"@types/mainloop.js": "^1.0.5",
|
"deepmerge": "^4.0.0",
|
||||||
"@types/react-helmet": "^5.0.8",
|
"keycode": "^2.2.0",
|
||||||
"@types/react-router-dom": "^4.3.4",
|
"mainloop.js": "^1.0.4",
|
||||||
"babel-loader": "^8.0.6",
|
"react": "^16.8.6",
|
||||||
"babel-plugin-transform-runtime": "^6.23.0",
|
"react-dom": "^16.8.6",
|
||||||
"babel-regenerator-runtime": "^6.5.0",
|
"react-router-dom": "^5.0.1",
|
||||||
"copy-webpack-plugin": "^5.1.1",
|
"react-toastify": "^5.3.2",
|
||||||
"cross-env": "^5.2.0",
|
"rxjs": "^6.5.2",
|
||||||
"css-loader": "^3.0.0",
|
"rxjs-hooks": "^0.5.1"
|
||||||
"file-loader": "^4.1.0",
|
}
|
||||||
"gh-pages": "^2.0.1",
|
|
||||||
"html-webpack-inline-source-plugin": "0.0.10",
|
|
||||||
"html-webpack-plugin": "^3.2.0",
|
|
||||||
"mini-css-extract-plugin": "^0.8.0",
|
|
||||||
"node-sass": "^4.13.1",
|
|
||||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
|
||||||
"sass-loader": "^7.1.0",
|
|
||||||
"style-loader": "^0.23.1",
|
|
||||||
"typescript": "^3.8.3",
|
|
||||||
"webpack": "^4.36.1",
|
|
||||||
"webpack-cli": "^3.3.6",
|
|
||||||
"webpack-dev-server": "^3.7.2",
|
|
||||||
"webpack-merge": "^4.2.1",
|
|
||||||
"webpack-node-externals": "^1.7.2"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@babel/plugin-proposal-optional-chaining": "^7.9.0",
|
|
||||||
"@eix-js/utils": "0.0.6",
|
|
||||||
"@material-ui/core": "^4.2.1",
|
|
||||||
"deepmerge": "^4.0.0",
|
|
||||||
"express": "^4.17.1",
|
|
||||||
"keycode": "^2.2.0",
|
|
||||||
"mainloop.js": "^1.0.4",
|
|
||||||
"react": "^16.8.6",
|
|
||||||
"react-dom": "^16.8.6",
|
|
||||||
"react-helmet": "^5.2.1",
|
|
||||||
"react-router-dom": "^5.0.1",
|
|
||||||
"react-toastify": "^5.3.2",
|
|
||||||
"rxjs": "^6.5.2",
|
|
||||||
"rxjs-hooks": "^0.5.1"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,11 @@
|
||||||
# upstream dream2nix flake:
|
# upstream dream2nix flake:
|
||||||
# nix run github:nix-community/dream2nix#detect-projects $source
|
# nix run github:nix-community/dream2nix#detect-projects $source
|
||||||
|
|
||||||
[logic-gate-simulator]
|
[erratic-gate]
|
||||||
name = "logic-gate-simulator"
|
name = "erratic-gate"
|
||||||
relPath = ""
|
relPath = ""
|
||||||
subsystem = "nodejs"
|
subsystem = "nodejs"
|
||||||
translator = "package-lock"
|
translator = "package-json"
|
||||||
translators = [ "package-lock", "package-json",]
|
builder = "strict-builder"
|
||||||
|
|
||||||
[logic-gate-simulator.subsystemInfo]
|
[erratic-gate.subsystemInfo]
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
|
@ -1,30 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<!-- This doesnt work inside react helmetv-->
|
|
||||||
<meta name="pinterest" content="nopin" />
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body
|
|
||||||
ondragstart="return false;"
|
|
||||||
ondrop="return false;"
|
|
||||||
oncontextmenu="return false"
|
|
||||||
>
|
|
||||||
<!--The react app is rendered here-->
|
|
||||||
<div id="app"></div>
|
|
||||||
|
|
||||||
<!--The splash screen structure-->
|
|
||||||
<div class="Splash">
|
|
||||||
<!--Loading animation-->
|
|
||||||
<div class="loading">
|
|
||||||
<div class="lds-ripple">
|
|
||||||
<div></div>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!--In case someone tries to laod this with js disabled-->
|
|
||||||
<noscript> JavaScript must be enabled to run this app. </noscript>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -11,7 +11,6 @@ import React, { useEffect } from 'react'
|
||||||
import CssBaseline from '@material-ui/core/CssBaseline'
|
import CssBaseline from '@material-ui/core/CssBaseline'
|
||||||
import Theme from '@material-ui/styles/ThemeProvider'
|
import Theme from '@material-ui/styles/ThemeProvider'
|
||||||
import Sidebar from './Sidebar'
|
import Sidebar from './Sidebar'
|
||||||
import Head from './Head'
|
|
||||||
import Root from './Root'
|
import Root from './Root'
|
||||||
import LogicGatePage from '../../logic-gates/components/LogicGatesPage'
|
import LogicGatePage from '../../logic-gates/components/LogicGatesPage'
|
||||||
import { loadSubject } from '../subjects/loadedSubject'
|
import { loadSubject } from '../subjects/loadedSubject'
|
||||||
|
|
@ -25,7 +24,6 @@ const App = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Head />
|
|
||||||
<CssBaseline />
|
<CssBaseline />
|
||||||
|
|
||||||
<Theme theme={muiTheme}>
|
<Theme theme={muiTheme}>
|
||||||
|
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
import Helmet from 'react-helmet'
|
|
||||||
import React from 'react'
|
|
||||||
|
|
||||||
const title = 'Logic gate simulator'
|
|
||||||
const description = 'A logic gate simulator made for infoeducatie 2019'
|
|
||||||
const url = 'https://logic-gate-simulator.herokuapp.com/'
|
|
||||||
|
|
||||||
const Head = () => {
|
|
||||||
return (
|
|
||||||
<Helmet>
|
|
||||||
<title>{title}</title>
|
|
||||||
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
|
|
||||||
/>
|
|
||||||
<link
|
|
||||||
rel="stylesheet"
|
|
||||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
|
||||||
/>
|
|
||||||
<meta
|
|
||||||
name="viewport"
|
|
||||||
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<link
|
|
||||||
href="https://fonts.googleapis.com/css?family=Righteous&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<meta property="og:title" content={title} />
|
|
||||||
<meta property="og:description" content={description} />
|
|
||||||
<meta property="og:url" content={url} />
|
|
||||||
|
|
||||||
<meta
|
|
||||||
name="Description"
|
|
||||||
content="A logic gate simulator made for infoeducatie 2019"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<link rel="icon" href={require('../../../assets/favicon.ico')} />
|
|
||||||
</Helmet>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Head
|
|
||||||
|
|
@ -117,7 +117,7 @@ const GateRawProperty = ({
|
||||||
raw.type === 'text' ||
|
raw.type === 'text' ||
|
||||||
raw.type === 'string'
|
raw.type === 'string'
|
||||||
) {
|
) {
|
||||||
return (input = (
|
return (
|
||||||
<TextField
|
<TextField
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
label={displayableName}
|
label={displayableName}
|
||||||
|
|
@ -126,9 +126,9 @@ const GateRawProperty = ({
|
||||||
multiline={raw.type === 'string'}
|
multiline={raw.type === 'string'}
|
||||||
rowsMax={7}
|
rowsMax={7}
|
||||||
/>
|
/>
|
||||||
))
|
)
|
||||||
} else if (raw.type === 'boolean') {
|
} else if (raw.type === 'boolean') {
|
||||||
return (input = (
|
return (
|
||||||
<>
|
<>
|
||||||
<span className="checkbox-label">{displayableName}</span>
|
<span className="checkbox-label">{displayableName}</span>
|
||||||
<CheckBox
|
<CheckBox
|
||||||
|
|
@ -139,7 +139,7 @@ const GateRawProperty = ({
|
||||||
checked={!!outputSnapshot}
|
checked={!!outputSnapshot}
|
||||||
/>{' '}
|
/>{' '}
|
||||||
</>
|
</>
|
||||||
))
|
)
|
||||||
}
|
}
|
||||||
})()
|
})()
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -70,7 +70,8 @@ export const DefaultGateTemplate: GateTemplate = {
|
||||||
enabled: false,
|
enabled: false,
|
||||||
color: 'white'
|
color: 'white'
|
||||||
},
|
},
|
||||||
category: categories.basic
|
category: categories.basic,
|
||||||
|
info: []
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -92,4 +92,5 @@ export interface GateTemplate {
|
||||||
enabled: boolean
|
enabled: boolean
|
||||||
}
|
}
|
||||||
category: number // for better sorting
|
category: number // for better sorting
|
||||||
|
info: string[]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
import express, { static as _static } from 'express'
|
|
||||||
import { resolve } from 'path'
|
|
||||||
|
|
||||||
// create express app
|
|
||||||
const app = express()
|
|
||||||
|
|
||||||
// serve static assets
|
|
||||||
app.use(_static(__dirname))
|
|
||||||
|
|
||||||
// serve single page application
|
|
||||||
app.get('*', (rex, res) => {
|
|
||||||
res.sendFile(resolve(__dirname, 'index.html'))
|
|
||||||
})
|
|
||||||
|
|
||||||
// listen to the port from .env (default to 8080)
|
|
||||||
app.listen(process.env.PORT || 8080)
|
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
@ -1,14 +1,29 @@
|
||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"moduleResolution": "node",
|
"target": "ESNext",
|
||||||
"esModuleInterop": true,
|
"lib": [ "DOM", "DOM.Iterable", "ESNext" ],
|
||||||
"jsx": "preserve",
|
"module": "ESNext",
|
||||||
"experimentalDecorators": true,
|
"skipLibCheck": true,
|
||||||
"target": "ESNext",
|
|
||||||
"downlevelIteration": true,
|
/* Bundler mode */
|
||||||
"strictNullChecks": true,
|
"moduleResolution": "bundler",
|
||||||
"module": "esnext"
|
"allowImportingTsExtensions": true,
|
||||||
},
|
"resolveJsonModule": true,
|
||||||
"exclude": ["node_modules"],
|
"isolatedModules": true,
|
||||||
"include": ["src"]
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Features */
|
||||||
|
"experimentalDecorators": true,
|
||||||
|
"downlevelIteration": true,
|
||||||
|
"strictNullChecks": true
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src"
|
||||||
|
],
|
||||||
|
"references": [
|
||||||
|
{
|
||||||
|
"path": "./tsconfig.node.json"
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
12
tsconfig.node.json
Normal file
12
tsconfig.node.json
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"composite": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"vite.config.ts"
|
||||||
|
]
|
||||||
|
}
|
||||||
7
vite.config.ts
Normal file
7
vite.config.ts
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
})
|
||||||
|
|
@ -1,171 +0,0 @@
|
||||||
const { resolve } = require('path')
|
|
||||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|
||||||
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin')
|
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
|
||||||
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
|
|
||||||
const webpackMerge = require('webpack-merge')
|
|
||||||
const nodeExternals = require('webpack-node-externals')
|
|
||||||
const CopyPlugin = require('copy-webpack-plugin')
|
|
||||||
|
|
||||||
const isProduction = process.env.NODE_ENV === 'production'
|
|
||||||
|
|
||||||
const projectRoot = resolve(__dirname)
|
|
||||||
const sourceFolder = resolve(projectRoot, 'src')
|
|
||||||
const buildFolder = resolve(projectRoot, 'dist')
|
|
||||||
const htmlTemplateFile = resolve(sourceFolder, 'index.html')
|
|
||||||
|
|
||||||
const babelRule = {
|
|
||||||
test: /\.(js|tsx?)$/,
|
|
||||||
use: 'babel-loader'
|
|
||||||
}
|
|
||||||
|
|
||||||
const fileRule = {
|
|
||||||
test: /\.(png|svg|jpg|gif|ico)$/,
|
|
||||||
use: ['file-loader']
|
|
||||||
}
|
|
||||||
|
|
||||||
const cssAndSass = [
|
|
||||||
isProduction
|
|
||||||
? MiniCssExtractPlugin.loader
|
|
||||||
: {
|
|
||||||
loader: 'style-loader',
|
|
||||||
options: {
|
|
||||||
singleton: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
'css-loader'
|
|
||||||
]
|
|
||||||
|
|
||||||
const cssRule = {
|
|
||||||
test: /\.css$/,
|
|
||||||
use: cssAndSass
|
|
||||||
}
|
|
||||||
|
|
||||||
const sassRule = {
|
|
||||||
test: /\.scss$/,
|
|
||||||
use: [
|
|
||||||
...cssAndSass,
|
|
||||||
{
|
|
||||||
loader: 'sass-loader',
|
|
||||||
options: {
|
|
||||||
includePaths: [sourceFolder]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const serverConfig = {
|
|
||||||
mode: 'production',
|
|
||||||
target: 'node',
|
|
||||||
externals: [nodeExternals()],
|
|
||||||
module: {
|
|
||||||
rules: [babelRule]
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
extensions: ['.ts', '.js', '.json']
|
|
||||||
},
|
|
||||||
entry: [resolve(sourceFolder, 'server')],
|
|
||||||
output: {
|
|
||||||
filename: 'server.js',
|
|
||||||
path: buildFolder,
|
|
||||||
publicPath: '/'
|
|
||||||
},
|
|
||||||
node: {
|
|
||||||
__dirname: false
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
new CopyPlugin([
|
|
||||||
{
|
|
||||||
from: resolve(sourceFolder, 'public'),
|
|
||||||
to: buildFolder
|
|
||||||
}
|
|
||||||
])
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const baseConfig = {
|
|
||||||
mode: 'none',
|
|
||||||
entry: ['babel-regenerator-runtime', resolve(sourceFolder, 'index')],
|
|
||||||
output: {
|
|
||||||
filename: 'js/[name].js',
|
|
||||||
path: buildFolder,
|
|
||||||
publicPath: '/'
|
|
||||||
},
|
|
||||||
module: {
|
|
||||||
rules: [babelRule, sassRule, cssRule, fileRule]
|
|
||||||
},
|
|
||||||
resolve: {
|
|
||||||
extensions: [
|
|
||||||
'.js',
|
|
||||||
'.ts',
|
|
||||||
'.tsx',
|
|
||||||
'.scss',
|
|
||||||
'.png',
|
|
||||||
'.svg',
|
|
||||||
'.jpg',
|
|
||||||
'.gif'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const devConfig = {
|
|
||||||
mode: 'development',
|
|
||||||
plugins: [
|
|
||||||
new HtmlWebpackPlugin({
|
|
||||||
template: htmlTemplateFile,
|
|
||||||
chunksSortMode: 'dependency'
|
|
||||||
})
|
|
||||||
],
|
|
||||||
devtool: 'inline-source-map',
|
|
||||||
devServer: {
|
|
||||||
historyApiFallback: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const prodConfig = {
|
|
||||||
mode: 'production',
|
|
||||||
optimization: {
|
|
||||||
minimize: true,
|
|
||||||
nodeEnv: 'production'
|
|
||||||
},
|
|
||||||
plugins: [
|
|
||||||
new MiniCssExtractPlugin({
|
|
||||||
filename: 'css/[name].min.css'
|
|
||||||
}),
|
|
||||||
new OptimizeCssAssetsWebpackPlugin(),
|
|
||||||
new HtmlWebpackPlugin({
|
|
||||||
template: htmlTemplateFile,
|
|
||||||
minify: {
|
|
||||||
removeComments: true,
|
|
||||||
collapseWhitespace: true,
|
|
||||||
removeRedundantAttributes: true,
|
|
||||||
useShortDoctype: true,
|
|
||||||
removeEmptyAttributes: true,
|
|
||||||
removeStyleLinkTypeAttributes: true,
|
|
||||||
keepClosingSlash: true,
|
|
||||||
minifyJS: true,
|
|
||||||
minifyCSS: true,
|
|
||||||
minifyURLs: true
|
|
||||||
},
|
|
||||||
inject: true
|
|
||||||
// favicon: faviconPath
|
|
||||||
}),
|
|
||||||
new HtmlWebpackInlineSourcePlugin()
|
|
||||||
],
|
|
||||||
devtool: 'source-map'
|
|
||||||
}
|
|
||||||
|
|
||||||
function getFinalConfig() {
|
|
||||||
if (process.env.NODE_ENV === 'production') {
|
|
||||||
console.info('Running production config')
|
|
||||||
return [webpackMerge(baseConfig, prodConfig), serverConfig]
|
|
||||||
} else if (process.env.NODE_ENV === 'server') {
|
|
||||||
console.info('Running server config')
|
|
||||||
return [serverConfig]
|
|
||||||
}
|
|
||||||
|
|
||||||
console.info('Running development config')
|
|
||||||
return webpackMerge(baseConfig, devConfig)
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = getFinalConfig()
|
|
||||||
Loading…
Reference in a new issue