Nevertheless! Party Metaphorically
    Have ideas to improve npm?Join in the discussion! »

    webpack-merge-config

    1.0.3 • Public • Published

    Welcome to webpack-merge-config 👋

    npm version

    Documentation License: MIT

    Merges webpack config in a smarter way as an alternative to webpack-merge that promotes code reuse.

    Inspiration

    Why use this instead of webpack-merge?

    See the followings:

    const config1 = {
      module: {
        rules: [
          {
            test: /\.css$/,
            loader: [
              {
                loader: "css-loader",
                options: { importLoaders: 1 },
              },
            ],
          }
        ],
      },
    }
    const config2 = {
      module: {
        rules: [
          {
            test: /\.css$/,
            loader: [
              {
                loader: "style-loader"
              },
            ],
          }
        ],
      },
    }
    
    const finalConfig = merge(config1, config2);
    
    

    In webpack-merge the output will be the following which duplicates the same loaders:

    const finalConfig = {
      module: {
        rules: [
          {
            test: /\.css$/,
            loader: [
              {
                loader: "css-loader",
                options: { importLoaders: 1 },
              },
            ],
          },
          {
            test: /\.css$/,
            loader: [
              {
                loader: "style-loader"
              },
            ],
          }
        ],
      },
     }
    

    In webpack-merge-config it will be merged instead as:

    const finalConfig = {
      module: {
        rules: [
          {
            test: /\.css$/,
            loader: [
              {
                loader: "style-loader"
              },
              {
                loader: "css-loader",
                options: { importLoaders: 1 },
              },
            ],
          },
        ],
      },
     }
    

    Install

    $ npm install webpack-config-merge --save-dev
    
    const merge = require('webpack-config-merge');
    module.exports = merge(config1, config2, {
      priority: 2
    });
    // If priority is 2, the lib will use unshift instead of push, this is useful for CSS related config.
    // For example, appends MiniCssExtractPlugin to the front.
    // Else, the third argument can be left empty.
    

    More examples

    const config1 = {
      plugins: [
        new HtmlWebPackPlugin({
          filename: 'index.html'
        })
      ]
    }
    
    const config2 = {
      plugins: [
        new HtmlWebPackPlugin({
          hash: true
        })
      ]
    }
    const finalConfig = merge(config1, config2);
    
    Output:
    const finalConfig = {
        plugins: [
        new HtmlWebPackPlugin({
          filename: 'index.html',
          hash: true
        })
      ]
    }
    
    
    
    const config1 = {
      module: {
        rules: [
          {
            test: /\.scss$/,
            loader: [
              {
                loader: "style-loader"
              },
            ],
          }
        ],
      },
      plugins: [
        new CopyWebpackPlugin([
          { from: '/1', to: '/2' },
        ])
      ]
    }
    
    const config2 = {
      module: {
        rules: [
          {
            test: /\.scss$/,
            loader: [
              AnyLoader
            ],
          }
        ],
      },
      plugins: [
        new CopyWebpackPlugin([
          { from: '/3', to: '/4' },
        ])
      ]
    }
    
    const finalConfig = merge(config1, config2);
    
    Output:
    const finalConfig = {
      module: {
        rules: [
          {
            test: /\.scss$/,
            loader: [
             {
                loader: "style-loader"
              },
              AnyLoader
            ],
          }
        ],
      },
      plugins: [
        new CopyWebpackPlugin([
          { from: '/1', to: '/2' },
          { from: '/3', to: '/4' },
        ])
      ]
    }
    

    Author

    👤 YIZHUANG

    Show your support

    Give a ⭐️ if this project helped you!

    📝 License

    Copyright © 2019 YIZHUANG.
    This project is MIT licensed.


    This project structure was generated with ❤️ by git-repo-npm-bootster

    Install

    npm i webpack-merge-config

    DownloadsWeekly Downloads

    2

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    12.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • avatar