better production build

This commit is contained in:
Rachel
2024-03-29 15:13:31 -07:00
parent 875a0832c6
commit 5130fb1695
11 changed files with 2158 additions and 47803 deletions

View File

@@ -4,7 +4,7 @@
"description": "an IC10 emulator for IC10 mips from Stationeers",
"main": "index.js",
"scripts": {
"build": "webpack --config webpack.config.js",
"build": "webpack --config webpack.config.prod.js",
"start": "webpack-dev-server"
},
"repository": {
@@ -30,6 +30,12 @@
"css-loader": "^6.10.0",
"hello-wasm-pack": "^0.1.0",
"html-webpack-plugin": "^5.6.0",
"image-minimizer-webpack-plugin": "^4.0.0",
"imagemin": "^8.0.1",
"imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^7.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-svgo": "^10.0.1",
"mini-css-extract-plugin": "^2.8.1",
"postcss-loader": "^8.1.1",
"sass": "^1.72.0",

1909
www/pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -154,7 +154,7 @@
<!-- <div class="flex-grow w-100">&nbsp;</div> -->
<ul class="nav navbar-nav navbar-right flex-row d-sm-none d-none d-md-flex">
<p class="navbar-text mt-auto mb-auto align-self-center" style="">Official Stationeers:</p>
<p class="navbar-text mt-auto mb-auto align-self-center">Official Stationeers:</p>
<li role="presentation" class="">
<a href="https://store.steampowered.com/app/544550/Stationeers/">
<i class="fa-brands fa-steam fa-w-16"></i>
@@ -190,7 +190,7 @@
<div class="d-flex flex-column flex-shrink-1">
<div id="virtualMachine">
<div id="vmActiveIC" class="container ">
<div class="ms-1 pb-2 row border border-secondary rounded bg-secondary bg-opacity-10">
<div class="ms-1 me-2 pb-2 row border border-secondary rounded bg-secondary bg-opacity-10">
<div class="mt-2 col">
<div id="vmControls" class="btn-group-vertical btn-group-sm " role="group" aria-label="Virtual Machine Controls">
<button id="vmControlRun" type="button" class="btn btn-primary">Run</button>

View File

@@ -17,6 +17,7 @@ module.exports = {
hot: true
},
mode: "development",
devtool: "eval-source-map",
plugins: [
new CopyWebpackPlugin({ patterns: ['img/*.png', 'img/*/*.png'] }),
new HtmlWebpackPlugin({ template: './src/index.html' }),
@@ -29,6 +30,10 @@ module.exports = {
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.(jpg|png|svg|gif)$/,
type: 'asset/resource',
},
{
test: /\.(scss)$/,
use: [{
@@ -45,7 +50,7 @@ module.exports = {
// if you use postcss 7.x skip the key
postcssOptions: {
// postcss plugins, can be exported to postcss.config.js
plugins: function() {
plugins: function () {
return [
require('autoprefixer')
];
@@ -63,7 +68,7 @@ module.exports = {
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
fallback: {
fallback: {
"crypto": require.resolve("crypto-browserify"),
"buffer": require.resolve("buffer"),
"stream": require.resolve("stream-browserify"),

127
www/webpack.config.prod.js Normal file
View File

@@ -0,0 +1,127 @@
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const miniCssExtractPlugin = require('mini-css-extract-plugin');
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
const path = require('path');
module.exports = {
entry: "./src/js/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
devServer: {
static: path.resolve(__dirname, 'dist'),
port: 8080,
hot: true
},
mode: "production",
devtool: "source-map",
plugins: [
new CopyWebpackPlugin({ patterns: ['img/*.png', 'img/*/*.png'] }),
new HtmlWebpackPlugin({ template: './src/index.html' }),
new miniCssExtractPlugin()
],
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /\.(jpg|png|svg|gif)$/,
type: 'asset/resource',
},
{
test: /\.(scss)$/,
use: [{
// inject CSS to page
loader: miniCssExtractPlugin.loader
}, {
// translates CSS into CommonJS modules
loader: 'css-loader'
}, {
// Run postcss actions
loader: 'postcss-loader',
options: {
// `postcssOptions` is needed for postcss 8.x;
// if you use postcss 7.x skip the key
postcssOptions: {
// postcss plugins, can be exported to postcss.config.js
plugins: function () {
return [
require('autoprefixer')
];
}
}
}
}, {
// compiles Sass to CSS
loader: 'sass-loader'
}],
// parser: {
// javascript : { importMeta: false }
// }
},],
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
fallback: {
"crypto": require.resolve("crypto-browserify"),
"buffer": require.resolve("buffer"),
"stream": require.resolve("stream-browserify"),
"vm": require.resolve("vm-browserify"),
},
},
experiments: {
asyncWebAssembly: true,
syncWebAssembly: true,
},
optimization: {
minimizer: [
new ImageMinimizerPlugin({
minimizer: {
implementation: ImageMinimizerPlugin.imageminMinify,
options: {
// Lossless optimization with custom option
// Feel free to experiment with options for better result for you
plugins: [
["gifsicle", { interlaced: true }],
["jpegtran", { progressive: true }],
["optipng", { optimizationLevel: 5 }],
// Svgo configuration here https://github.com/svg/svgo#configuration
[
"svgo",
{
plugins: [
{
name: "preset-default",
params: {
overrides: {
removeViewBox: false,
addAttributesToSVGElement: {
params: {
attributes: [
{ xmlns: "http://www.w3.org/2000/svg" },
],
},
},
},
},
},
],
},
],
],
},
},
})
]
}
// output: {
// filename: 'bundle.js',
// path: path.resolve(__dirname, 'dist'),
// },
};