yizhuang / webpack-merge-config

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

Welcome to webpack-merge-config 👋

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

• Github: @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