Webpack-merge usage tutorial

Why use webpack-merge

• There are huge differences in the construction goals of development and production in the two environmentsTherefore, the gap in webpack configuration writing will be very large
• In a development environment, we need: powerfulsource mapHave onelive reloading (reload in real time)orhot module replacementCapable localhost server.
• The production environment goals are shifted to other aspects, and the focus is onCompression bundles, lighter source maps, resource optimization, etc., improve loading time through these optimizations. Since logical separation is to be followed, we usually recommendEach environment writes independent webpack configurations.
• Although we have made a subtle distinction between production environment and development environment above, please note that we will still followThe principle of not repeating configuration, keep one"common( public )" configuration. To merge these configurations together, we will use a name calledwebpack-mergetools. This tool references the "common" configuration, so we no longer have to be environment-specificenvWrite duplicate code in the configuration.

Install

npm install --save-dev webpack-merge

Directory structure

 webpack-demo
  |- 
  |- 
 - |-  // Delete global webpack configuration + |-  // Create a new public configuration + |- 	// Create a new development environment configuration + |- 	// Create a new production environment configuration  |- /dist
  |- /src
    |- 
    |- 
  |- /node_modules

Public configuration

const path = require('path');
// The plugin will generate an HTML5 file for you,// Use script tags in body to introduce all your webpack-generated bundles. const HtmlWebpackPlugin = require('html-webpack-plugin');

  = {
   entry: {
     app: './src/',
   },
   plugins: [
     new HtmlWebpackPlugin({
       title: 'Production',
     }),
   ],
   output: {
     filename: '[name].',
     path: (__dirname, 'dist'),
     clean: true,
   },
 };

Development environment configuration

// Introduce webpack-mergeconst { merge } = require('webpack-merge');
// Introduce public configuration const common = require('./');
// The first parameter is the common configuration. The second parameter is the configuration in the environment.  = merge(common, {
   mode: 'development',
   devtool: 'inline-source-map',
   devServer: {
     static: './dist',
   },
 });

Production environment configuration

 const { merge } = require('webpack-merge');
 const common = require('./');

  = merge(common, {
   mode: 'production',
 });

• Now, in , we set up the entry and output configurations, and introduce all plugins that are common to both environments.
• In , we set mode to development and we added the recommended devtool (strong source map) and devServer configurations for this environment.
• Finally, in , we set mode to production,

Note that using the merge() function in environment-specific configurations can easily reference common configurations in and common configurations. The webpack-merge tool provides various advanced features of merge, but in our use cases, these features are not required.

This is the end of this article about the use of webpack-merge. For more information about the use of webpack-merge, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!