dev and production modes with webpack

eclipse-thingweb · Sep 26, 2023 · e43b8bb · e43b8bb
1 parent 61a1cdf
commit e43b8bb
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 83 deletions.
diff --git a/packages/web-new/README.md b/packages/web-new/README.md
@@ -58,7 +58,7 @@ The `webpack.config.js` file is used to set up Webpack for the project. It manag
 - `assetModuleFilename`: Specifies the filename for asset files
 
 **3.3 Development Server**
-- `devServer`: Configures the development server with settings such as the port, enabling hot module replacement, compressing assets, and enabling history API fallback
+- `devServer`: Configures the development server with settings such as the port, compressing assets, and enabling history API fallback
 
 **3.4 Module Rules**
 - `module`: Defines rules for how Webpack should process different file types. There are rules for JavaScript, images, CSS, and more. For example, it uses Babel to transpile JavaScript, handles image assets, and processes CSS with style loaders and sass loaders
@@ -94,7 +94,7 @@ Finally the web application can be deployed in production or in development mode
 
 ### Development mode
 
-1. Utilze the command `npm  run dev` which will start the webpack-dev-server in development mode, open your default browser and serve the application according to the configuaration specified in the `webpack.config.js` file.
+1. Utilze the command `npm  run dev` which will start the webpack-dev-server in development mode, generate source maps for easier debuging, open your default browser and serve the application.
 
 ```sh
 npm run dev

diff --git a/packages/web-new/package.json b/packages/web-new/package.json
@@ -16,7 +16,7 @@
   },
   "scripts": {
     "build": "node external-scripts/generate-paths.js && webpack --mode production",
-    "dev": "webpack-dev-server --mode development --config webpack.config.js",
+    "dev": "webpack serve --mode development",
     "serve": "node server/server.js",
     "examples": "node external-scripts/generate-paths.js"
   },

diff --git a/packages/web-new/webpack.config.js b/packages/web-new/webpack.config.js
@@ -28,91 +28,100 @@ const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 
-module.exports = {
-    entry: {
-        bundle: path.resolve(__dirname, 'src/scripts/main.js'),
-        styles: path.resolve(__dirname, 'src/styles/styles.css'),
-    },
-    output: {
-        path: path.resolve(__dirname, 'dist'),
-        filename: '[name][contenthash].js',
-        clean: true,
-        assetModuleFilename: '[name][ext]',
-    },
-    devtool: 'source-map',
-    devServer: {
-        static: {
-            directory: path.resolve(__dirname, 'dist')
+module.exports = (env, argv) => {
+
+    const isDevMode = argv.mode === "development"
+
+    const config = {
+        entry: {
+            bundle: path.resolve(__dirname, 'src/scripts/main.js'),
+            styles: path.resolve(__dirname, 'src/styles/styles.css'),
         },
-        port: 3000,
-        open: true,
-        hot: true,
-        compress: true,
-        historyApiFallback: true,
-    },
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                exclude: /node_modules/,
-                use: {
-                    loader: 'babel-loader',
-                    options: {
-                        presets: ['@babel/preset-env']
-                    }
-                }
-            },
-            {
-                test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
-                type: 'asset/resource'
-            },
-            {
-                test:/\.scss$/,
-                use: ['style-loader','css-loader','sass-loader'],
-            },
-            {
-                test: /\.css$/i,
-                use: [MiniCssExtractPlugin.loader, 'css-loader'],
-            },
-			{
-				test: /\.ttf$/,
-				type: 'asset/resource'
-			},
-            {
-                test: /\.json$/,
-                use: 'json-loader',
-                type: 'javascript/auto', // Necessary for Webpack 5
+        output: {
+            path: path.resolve(__dirname, 'dist'),
+            filename: '[name][contenthash].js',
+            clean: true,
+            assetModuleFilename: '[name][ext]',
+        },
+        devtool: isDevMode ? 'source-map' : false,
+        devServer: isDevMode ? 
+        {
+            static: {
+                directory: path.resolve(__dirname, 'dist')
             },
-        ]
-    },
-    plugins: [
-        new HtmlWebpackPlugin({
-            title: 'Webpack App',
-            filename: 'index.html',
-            template: 'src/template.html',
-            favicon: 'src/assets/favicon/favicon.ico'
-        }),
-        // new BundleAnalyzerPlugin(),
-        new CopyWebpackPlugin({
-            patterns: [
+            port: 3000,
+            open: true,
+            hot: false,
+            compress: true,
+            historyApiFallback: true,
+        } 
+        : {},
+        module: {
+            rules: [
                 {
-                    from: './src/assets/favicon',
-                    to: 'favicon',
+                    test: /\.js$/,
+                    exclude: /node_modules/,
+                    use: {
+                        loader: 'babel-loader',
+                        options: {
+                            presets: ['@babel/preset-env']
+                        }
+                    }
                 },
                 {
-                    from: './src/examples-paths',
-                    to: 'examples-paths',
+                    test: /\.(png|svg|jpg|jpeg|gif|ico)$/i,
+                    type: 'asset/resource'
                 },
-            ],
-        }),
-        new MonacoWebpackPlugin(),
-        new MiniCssExtractPlugin({
-            filename: '[name].[contenthash].css',
-        })
-    ],
-    optimization: {
-        minimizer: [
-            new CssMinimizerPlugin(),
-        ]
+                {
+                    test: /\.scss$/,
+                    use: ['style-loader', 'css-loader', 'sass-loader'],
+                },
+                {
+                    test: /\.css$/i,
+                    use: [MiniCssExtractPlugin.loader, 'css-loader'],
+                },
+                {
+                    test: /\.ttf$/,
+                    type: 'asset/resource'
+                },
+                {
+                    test: /\.json$/,
+                    use: 'json-loader',
+                    type: 'javascript/auto', // Necessary for Webpack 5
+                },
+            ]
+        },
+        plugins: [
+            new HtmlWebpackPlugin({
+                title: 'Webpack App',
+                filename: 'index.html',
+                template: 'src/template.html',
+                favicon: 'src/assets/favicon/favicon.ico'
+            }),
+            // new BundleAnalyzerPlugin(),
+            new CopyWebpackPlugin({
+                patterns: [
+                    {
+                        from: './src/assets/favicon',
+                        to: 'favicon',
+                    },
+                    {
+                        from: './src/examples-paths',
+                        to: 'examples-paths',
+                    },
+                ],
+            }),
+            new MonacoWebpackPlugin(),
+            new MiniCssExtractPlugin({
+                filename: '[name].[contenthash].css',
+            })
+        ],
+        optimization: {
+            minimizer: [
+                new CssMinimizerPlugin(),
+            ]
+        }
     }
+
+    return config
 }