use MiniCssExtractPlugin to load extract CSS styles from JS

stv0g · Jun 12, 2022 · 2df5d06 · 2df5d06
1 parent a9d4e99
commit 2df5d06
Show file tree

Hide file tree

Showing 4 changed files with 133 additions and 5 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -21,6 +21,7 @@
         "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^6.7.1",
         "html-webpack-plugin": "^5.5.0",
+        "mini-css-extract-plugin": "^2.6.0",
         "postcss": "^8.4.14",
         "postcss-loader": "^7.0.0",
         "sass": "^1.52.3",

diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js
@@ -1,6 +1,7 @@
 const path = require("path");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 module.exports = {
     entry: "./src/index.ts",
@@ -17,7 +18,8 @@ module.exports = {
             patterns: [
               { from: "img/*", to: "" }
             ],
-          }),
+        }),
+        new MiniCssExtractPlugin()
     ],    
     resolve: {
         modules: ["node_modules"],
@@ -32,11 +34,12 @@ module.exports = {
             },
             {
                 test: /\.(scss)$/,
-                use: [{
-                        loader: "style-loader", // inject CSS to page
-                    }, {
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
                         loader: "css-loader", // translates CSS into CommonJS modules
-                    }, {
+                    },
+                    {
                         loader: "postcss-loader", // Run post css actions
                         options: {
                             postcssOptions: {

diff --git a/frontend/webpack.prod.js b/frontend/webpack.prod.js
@@ -3,4 +3,5 @@ const common = require("./webpack.common.js");
 
 module.exports = merge(common, {
     mode: "production",
+    devtool: "source-map",
 });