react-tree/webpack.examples.hot.config.js at master · Jen-ni/react-tree · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
const webpack = require('webpack');
const WriteFilePlugin = require('write-file-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const path = require('path');
const autoprefixer = require('autoprefixer');
const precss = require('precss');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const flexbugs = require('postcss-flexbugs-fixes');
const merge = require('webpack-merge');

const params = {
  root: __dirname,
  buildPath: 'examples-build',
  output: {
    path: path.join(__dirname, '/examples-build'),
    filename: 'examples.js',
  },
  entry: {
    app: path.join(__dirname, '/examples/index.jsx'),
  },
};

const getBaseConfiguration = require('./webpack/base.config.js');

const plugins = [
  new HtmlWebpackPlugin({ filename: 'index.html', template: 'examples/index.html' }),
  new webpack.HotModuleReplacementPlugin(),
  new WriteFilePlugin({ log: false }),
  new ProgressBarPlugin({ clear: false }),
];

const rules = [
  {
    test: /\.ejs$/,
    use: [
      'ejs-loader?variable=data',
    ],
  },
  {
    test: /\.scss$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          plugins: () => [flexbugs, precss, autoprefixer],
        },
      },
      'sass-loader',
    ],
  },
  {
    test: /\.ico$/,
    use: [
      'file-loader?name=[name].[ext]',
    ],
    include: /images/,
  },
  {
    test: /\.css$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'postcss-loader',
        options: {
          plugins: () => [flexbugs, precss, autoprefixer],
        },
      },
    ],
  },
];

const config = merge(getBaseConfiguration(params), {
  devtool: 'source-map',
  plugins,
  module: {
    rules,
  },
});

const wdsEntries = [
  'webpack-dev-server/client?http://localhost:5555',
  'webpack/hot/only-dev-server',
];

// All entries must include webpack dev server entries
Object.keys(config.entry).forEach((key) => {
  if (Array.isArray(config.entry[key])) {
    config.entry[key] = wdsEntries.concat(config.entry[key]);
  } else {
    const originalEntry = config.entry[key];
    config.entry[key] = wdsEntries.slice(0);
    config.entry[key].push(originalEntry);
  }
});

// Add react transforms as babel plugin
// https://github.com/gaearon/babel-plugin-react-transform
config.module.rules.forEach((loader, index) => {
  if (/^babel/.test(loader.loader)) {
    const reactTransformPlugin = ['react-transform', {
      transforms: [
        {
          transform: 'react-transform-hmr',
          imports: ['react'],
          locals: ['module'],
        },
      ],
    }];
    if (config.module.rules[index].query.plugins) {
      config.module.rules[index].query.plugins.push(reactTransformPlugin);
    } else {
      config.module.rules[index].query.plugins = [reactTransformPlugin];
    }
  }
});

config.devServer = {
  noInfo: true,
  quiet: false,
  port: 5555,
  historyApiFallback: true,
  clientLogLevel: 'error',
  hot: true,
  stats: { colors: true },
  // host: '192.168.0.101', // make dev server available on specific IP
};

module.exports = config;