Webpack updated

Cyb10101 · Sep 10, 2021 · 17b59b2 · 17b59b2
1 parent 12565f7
commit 17b59b2
Show file tree

Hide file tree

Showing 3 changed files with 1,330 additions and 2,368 deletions.
diff --git a/package.json b/package.json
@@ -16,16 +16,18 @@
         "sortablejs": "^1.10.1"
     },
     "devDependencies": {
-        "css-loader": "^3.2.0",
+        "clean-webpack-plugin": "^4.0.0",
+        "css-loader": "^6.2.0",
         "electron": "^6.0.11",
         "electron-builder": "^21.2.0",
-        "file-loader": "^4.2.0",
         "friendly-errors-webpack-plugin": "^1.7.0",
-        "mini-css-extract-plugin": "^0.8.0",
-        "node-sass": "^4.12.0",
-        "sass-loader": "^8.0.0",
-        "webpack": "^4.41.0",
-        "webpack-cli": "^3.3.9"
+        "mini-css-extract-plugin": "^2.2.2",
+        "node-sass": "^6.0.1",
+        "sass": "^1.39.2",
+        "sass-loader": "^12.1.0",
+        "webpack": "^5.52.1",
+        "webpack-cli": "^4.8.0",
+        "webpack-manifest-plugin": "^4.0.2"
     },
     "build": {
         "appId": "com.cyb.${name}",

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,49 +1,62 @@
+'use strict';
+
 const path = require('path');
+const webpack = require('webpack');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
+const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+const {WebpackManifestPlugin} = require('webpack-manifest-plugin');
 
 module.exports = (env, argv) => {
     const devMode = argv.mode === 'development';
 
     return {
         // JavaScript
         entry: {
-            'app': './assets/js/app.js',
+            'app': './assets/js/app.js'
         },
         output: {
             filename: '[name].js',
+            // filename: '[name].[contenthash].js',
+            // chunkFilename: '[name].[contenthash].js',
             path: path.resolve(__dirname, 'public/build'),
             publicPath: 'app://build/'
         },
 
         // Sass
         module: {
-            rules: [{
-                test: /\.s[ac]ss$/i,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    // 'style-loader', // Creates `style` nodes from JS strings
-                    'css-loader', // Translates CSS into CommonJS
-                    'sass-loader' // Compiles Sass to CSS
-                ]
-            }, {
-                test: /\.(ttf|eot|woff|woff2)$/,
-                use: {
-                    loader: 'file-loader',
-                    options: {
-                        name: 'fonts/[name].[ext]',
-                    },
-                },
-            }, {
-                test: /\.(gif|png|jpe?g|svg)$/,
-                use: [{
-                    loader: 'file-loader',
-                    options: {
-                        limit: 8000, // Convert images < 8kb to base64 strings
-                        name: 'images/[hash]-[name].[ext]'
+            rules: [
+                // Website
+                {
+                    test: /\.s[ac]ss$/i,
+                    use: [
+                        MiniCssExtractPlugin.loader, // instead of style-loader
+                        'css-loader', // Translates CSS into CommonJS
+                        // 'sass-loader' // Compiles Sass to CSS
+                        {
+                            loader: 'sass-loader',
+                            options: {
+                                implementation: require('sass'), // Prefer: dart-sass
+                                sassOptions: {
+                                    fiber: false,
+                                }
+                            }
+                        }
+                    ]
+                }, {
+                    test: /\.(ttf|eot|woff|woff2)$/i,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: 'fonts/' + (devMode ? '[name]_' : '') + '[hash][ext][query]'
+                    }
+                }, {
+                    test: /\.(gif|png|jpe?g|svg)$/i,
+                    type: 'asset/resource',
+                    generator: {
+                        filename: 'images/' + (devMode ? '[name]_' : '') + '[hash][ext][query]'
                     }
-                }]
-            }],
+                }
+            ],
         },
         externals: [
             (function () {
@@ -59,13 +72,25 @@ module.exports = (env, argv) => {
             })()
         ],
         plugins: [
-            new MiniCssExtractPlugin({
-                filename: '[name].css',
+            new webpack.DefinePlugin({
+                PRODUCTION: (argv.mode === 'production')
             }),
             new FriendlyErrorsWebpackPlugin({
                 clearConsole: false
+            }),
+            new WebpackManifestPlugin(),
+            new CleanWebpackPlugin(),
+            new MiniCssExtractPlugin({
+                filename: '[name].css',
+                // filename: '[name].[contenthash].css',
+                // chunkFilename: '[name].[contenthash].css'
             })
         ],
+        optimization: {
+            splitChunks: {
+                automaticNameDelimiter: '_',
+            }
+        },
         performance: {
             hints: false
         },