fix: setup webpack5 config

seed-rs · Apr 11, 2021 · 291ad5a · 291ad5a
1 parent 81ab127
commit 291ad5a
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 27 deletions.
diff --git a/package.json b/package.json
@@ -5,8 +5,8 @@
   "repository": "https://github.com/MartinKavik/seed-quickstart-webpack",
   "license": "MIT",
   "scripts": {
-    "start": "yarn generate:css_classes && webpack-dev-server --config webpack.config.js -d",
-    "start:release": "yarn generate:css_classes && webpack-dev-server --config webpack.config.js --mode=production",
+    "start": "yarn generate:css_classes && webpack serve --config webpack.config.js -d eval --mode=development",
+    "start:release": "yarn generate:css_classes && webpack serve --config webpack.config.js --mode=production",
     "build": "yarn generate:css_classes && webpack --config webpack.config --mode=development",
     "build:release": "yarn generate:css_classes && webpack --config webpack.config --mode=production",
     "build:prerender": "yarn build:release && yarn prerender",
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@wasm-tool/wasm-pack-plugin": "1.4.0",
+    "autoprefixer": "^10.2.5",
     "clean-webpack-plugin": "^3.0.0",
     "concurrently": "^6.0.1",
     "copy-webpack-plugin": "^8.1.1",

diff --git a/webpack.config.js b/webpack.config.js
@@ -43,6 +43,9 @@ module.exports = (env, argv) => {
         errors: true
       },
     },
+    experiments: {
+      asyncWebAssembly: true,
+    },
     plugins: [
       // Show compilation progress bar in console.
       new WebpackBar(),
@@ -63,16 +66,18 @@ module.exports = (env, argv) => {
 
       // You can find files from folder `../static` on url `http://my-site.com/static/`.
       // And favicons in the root.
-      new CopyWebpackPlugin([
-        {
-          from: "static",
-          to: "static"
-        },
-        {
-          from: "favicons",
-          to: ""
-        }
-      ]),
+      new CopyWebpackPlugin({
+        patterns: [
+          {
+            from: "static",
+            to: "static"
+          },
+          {
+            from: "favicons",
+            to: ""
+          }
+        ]
+      }),
     ],
     // Webpack try to guess how to resolve imports in this order:
     resolve: {
@@ -110,7 +115,15 @@ module.exports = (env, argv) => {
         },
         {
           test: /\.ts$/,
-          loader: "ts-loader?configFile=tsconfig.json"
+          use: [
+            {
+              loader: "ts-loader",
+              options: {
+                configFile: "tsconfig.css_classes.json"
+              }
+            }
+          ]
+
         },
         {
           test: /\.css$/,
@@ -120,14 +133,11 @@ module.exports = (env, argv) => {
             {
               loader: "postcss-loader",
               options: {
-                config: {
-                  // Path to postcss.config.js.
-                  path: __dirname,
-                  // Pass mode into `postcss.config.js` (see more info in that file).
-                  ctx: { mode: argv.mode }
+                postcssOptions: {
+                  config: path.resolve(__dirname, "postcss.config.js"),
                 }
-              }
-            }
+              },
+            },
           ]
         }
       ]

diff --git a/webpack.css_classes.config.js b/webpack.css_classes.config.js
@@ -31,7 +31,14 @@ module.exports = (env, argv) => {
         },
         {
           test: /\.ts$/,
-          loader: "ts-loader?configFile=tsconfig.css_classes.json",
+          use: [
+            {
+              loader: "ts-loader",
+              options: {
+                configFile: "tsconfig.css_classes.json"
+              }
+            }
+          ]
         },
         {
           test: /\.css$/,
@@ -41,10 +48,9 @@ module.exports = (env, argv) => {
             {
               loader: "postcss-loader",
               options: {
-                config: {
-                  ctx: { mode: argv.mode },
-                  path: __dirname,
-                },
+                postcssOptions: {
+                  config: path.resolve(__dirname, "postcss.config.js"),
+                }
               },
             },
           ],

diff --git a/yarn.lock b/yarn.lock
@@ -597,6 +597,18 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+autoprefixer@^10.2.5:
+  version "10.2.5"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.2.5.tgz#096a0337dbc96c0873526d7fef5de4428d05382d"
+  integrity sha512-7H4AJZXvSsn62SqZyJCP+1AWwOuoYpUfK6ot9vm0e87XD6mT8lDywc9D9OTJPMULyGcvmIxzTAMeG2Cc+YX+fA==
+  dependencies:
+    browserslist "^4.16.3"
+    caniuse-lite "^1.0.30001196"
+    colorette "^1.2.2"
+    fraction.js "^4.0.13"
+    normalize-range "^0.1.2"
+    postcss-value-parser "^4.1.0"
+
 axios@^0.21.1:
   version "0.21.1"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
@@ -747,7 +759,7 @@ braces@^3.0.1, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.14.5:
+browserslist@^4.14.5, browserslist@^4.16.3:
   version "4.16.3"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.3.tgz#340aa46940d7db878748567c5dea24a48ddf3717"
   integrity sha512-vIyhWmIkULaq04Gt93txdh+j02yX/JzlyhLYbV3YQCn/zvES3JnY7TifHHvvr1w5hTDluNKMkV05cs4vy8Q7sw==
@@ -847,7 +859,7 @@ camelcase@^6.2.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
 
-caniuse-lite@^1.0.30001181:
+caniuse-lite@^1.0.30001181, caniuse-lite@^1.0.30001196:
   version "1.0.30001207"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001207.tgz#364d47d35a3007e528f69adb6fecb07c2bb2cc50"
   integrity sha512-UPQZdmAsyp2qfCTiMU/zqGSWOYaY9F9LL61V8f+8MrubsaDGpaHD9HRV/EWZGULZn0Hxu48SKzI5DgFwTvHuYw==
@@ -2117,6 +2129,11 @@ forwarded@~0.1.2:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
+fraction.js@^4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.0.13.tgz#3c1c315fa16b35c85fffa95725a36fa729c69dfe"
+  integrity sha512-E1fz2Xs9ltlUp+qbiyx9wmt2n9dRzPsS11Jtdb8D2o+cC7wr9xkkKsVKJuBX0ST+LVS+LhLO+SbLJNtfWcJvXA==
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -3410,6 +3427,11 @@ normalize-path@^3.0.0, normalize-path@~3.0.0:
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"