webpack merge 환경분리

webpack 을 사용하다보니 공통적인 환경을 분리하면 좋을것 같다는 생각이 들어서 찾아보니 webpack merge 라는 라이브러리가 있었다.

webpack.common.js
webpack.dev.js
webpack.prod.js

위와 같이 3가지로 나누어 사용할 수있다.
common은 공통적인 내용을 담고
dev, prod 는 각각 개발 환경, 운영환경에 맞는 설정을 하고 common의 내용을 import하여 사용한다.

webpack.common.js

// webpack.common.js
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin(),
  ],
}

webpack.dev.js

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

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: { contentBase: './dist' }
});

webpack.prod.js

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

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

참고자료
https://joshua1988.github.io/webpack-guide/advanced/webpack-merge.html#webpack-merge