Throughout this tutorial, we have been manually making changes to our source code, running the build process, and inspecting the build files. It would be more efficient if we could automate this process so that we can immediately see the changes we have made to our source code.

Webpack Dev Server is a development server that comes with webpack. It provides a number of features that make development easier, including:

• Live reloading: When we make changes to our code, webpack-dev-server will automatically reload the browser so that we can see the changes without having to manually refresh the page.
• Hot module replacement: This allows us to update individual modules in your application without having to restart the entire application. This can be very helpful when working with large applications or when we are making frequent changes to our code.
• Static file serving: webpack-dev-server can serve static files, such as images, CSS, and JavaScript, from our project directory. This can be useful for development purposes, such as when we are working on a project that requires a large number of static files.

Overall, webpack-dev-server is a very useful tool for development. It can save us a lot of time and frustration by making it easier to make changes to our code and see the results of those changes.

Splitting Webpack Configuration for Development and Production

Splitting webpack configuration for production and development environments offers several advantages:

1. Clear separation of concerns: Production and development have different requirements and goals. By splitting the webpack configuration, we can define specific settings, optimizations, and plugins tailored to each environment. This helps maintain a clean and focused configuration for each scenario.
2. Enhanced development experience: Development builds often require additional features like hot module replacement (HMR), faster rebuild times, and error notifications. By having a separate development configuration, we can enable these features without affecting the production build.
3. Performance optimization: Production builds prioritize file size reduction, code minification, and other optimizations to improve performance. Separating the production configuration allows us to apply specific optimizations, such as tree shaking, code splitting, and minification, which may not be necessary or desired in the development environment.
4. Security considerations: Certain security measures, such as Content Security Policy (CSP) or source map handling, may be needed only in production. Splitting the configuration ensures that these security-related settings are applied correctly in the production build while keeping the development build more permissive for debugging and testing purposes.
5. Environment-specific variables and conditions: Splitting the configuration allows us to define environment-specific variables, such as API endpoints or feature flags, which can be set differently for development and production. This flexibility helps manage different deployment environments and ensures consistent behavior across environments.

So let’s include this in our development workflow to take advantage of all the sweet features supported by webpack.

1. To improve our webpack configuration, we will divide our existing webpack.config.js file into three separate files.

   • webpack.common.js: This file will contain the base configuration shared by both development and production environments. It will include common settings such as entry points, output paths, and module rules that are applicable to all environments.
   • webpack.dev.js: This file will focus on development-specific configuration. It will include settings like the development mode, development server options, source maps for better debugging, and any additional development-specific optimizations or plugins.
   • webpack.prod.js: This file will focus on production-specific configuration. It will include optimizations such as minification, tree shaking, and code splitting to generate optimized bundles. Additionally, it will include production-specific plugins like CSS extraction, file compression, and any other performance-related optimizations.

2. We will rename the existing webpack.config.js file to webpack.common.js and relocate it to a dedicated directory named webpack.

3. To align with the updated configuration structure where the config files are placed inside a webpack folder, we need to modify the output.path configuration in the webpack.common.js file. By specifying the path as path.resolve(__dirname, '../dist'), we ensure that webpack builds the output in the dist folder located one directory above the webpack folder.

   const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   const MiniCssExtractPlugin = require('mini-css-extract-plugin')
   const { PurgeCSSPlugin } = require('purgecss-webpack-plugin')
   const TerserPlugin = require('terser-webpack-plugin')
   const path = require('path')
   
   module.exports = {
     entry: './src/index.js',
     module: {
       rules: [
         {
           test: /\\.css$/,
           use: [MiniCssExtractPlugin.loader, 'css-loader'],
         },
       ],
     },
     optimization: {
       minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
     },
     output: {
       filename: 'main.js',
       path: path.resolve(__dirname, '../dist')
     },
     plugins: [
       new HtmlWebpackPlugin({
         filename: 'index.html',
         template: './src/index.html',
       }),
       new MiniCssExtractPlugin({
         filename: 'index.css',
       }),
       new PurgeCSSPlugin({
         paths: ['./src/index.html'],
       }),
     ],
   }
   

4. Inside the webpack directory, we will create two new files, namely webpack.dev.js and webpack.prod.js.

5. The webpack.dev.js file will inherit all the configuration settings from the webpack.common.js file and will set the mode to development.

6. Similarly, the webpack.prod.js file will also inherit all the configuration settings from the webpack.common.js file but will set the mode to production.