const path = require('path');
const webpackMerge = require('webpack-merge');
const common = require('./webpack.common.js');

process.env.BABEL_ENV = 'development';

module.exports = webpackMerge.merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  resolve: {
    modules: ['packages', 'node_modules'],
    extensions: ['.js', '.ts', '.tsx'],
    alias: {
      // packages/ の react-device-mode submodule(1.3.2) は styled-components v3 向けの
      // ビルドのため、プロジェクトの styled-components v5 だと keyframes 解決でクラッシュする。
      // styled-components v3 を同梱している npm 版(node_modules)を dev でも使う。
      'react-device-mode': path.resolve(__dirname, 'node_modules/react-device-mode'),
    },
  },
  devServer: {
    open: true,
    hot: false,
    static: {
      watch: true,
    },
    devMiddleware: {
      publicPath: '/themes/system/dest/',
    },
    port: 3000,
    proxy: [
      {
        context: ['**'],
        target: 'http://acms.org:80',
        secure: false,
        changeOrigin: true,
      },
    ],
  }
});
