react-sample-app/webpack.config.js at master · velther/react-sample-app · 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
const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

const DEV_SERVER_PORT = 9000;

const env = process.env.NODE_ENV;
const isDev = env !== 'production';
const cwd = process.cwd();

const cssLoaderConfig = {
  loader: 'css-loader',
  query: {
    modules: true,
    camelCase: true,
    localIdentName: isDev ? '[name]-[local]' : '[name]-[local]-[hash:base64:5]',
  },
};

const devStylesLoader = ['style-loader', cssLoaderConfig, 'stylus-loader'];

const prodStylesLoader = [MiniCssExtractPlugin.loader, cssLoaderConfig, 'stylus-loader'];

module.exports = {
  mode: env || 'development',
  entry: isDev
    ? [
      './app/lib/polyfill.js',
      'react-hot-loader/patch',
      'webpack-dev-server/client?http://localhost:9000',
      'webpack/hot/only-dev-server',
      './app/app.dev.js',
    ]
    : ['./app/lib/polyfill.js', './app/app.prod.js'],
  output: {
    filename: isDev ? '[name].bundle.js' : '[name].[hash].js',
    path: path.join(__dirname, 'public'),
    publicPath: isDev ? `http://localhost:${DEV_SERVER_PORT}/` : '/',
  },
  module: {
    rules: [
      {
        test: /.jsx?/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.styl/,
        loaders: isDev ? devStylesLoader : prodStylesLoader,
      },
    ],
  },
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.json', '.jsx'],
    alias: {
      actions: path.join(cwd, 'app/actions'),
      common: path.join(cwd, 'app/components/_common'),
      components: path.join(cwd, 'app/components'),
      constants: path.join(cwd, 'app/constants'),
      lib: path.join(cwd, 'app/lib'),
    },
  },
  optimization: {
    namedModules: true,
    splitChunks: {
      chunks: 'all',
    },
  },
  watch: isDev,
  devtool: isDev ? 'source-map' : false,
  plugins: (() => {
    const plugins = [new AssetsPlugin({ filename: 'assets.json' })];
    if (process.env.ANALYZE) {
      plugins.push(new BundleAnalyzerPlugin());
    }

    if (isDev) {
      return [new webpack.HotModuleReplacementPlugin()];
    }
    return [...plugins, new MiniCssExtractPlugin({ filename: '[name]_[contenthash].css' })];
  })(),
  devServer: {
    contentBase: [path.join(__dirname, 'public')],
    quiet: false,
    stats: {
      errors: true,
    },
    compress: true,
    hot: true,
    port: DEV_SERVER_PORT,
    headers: { 'Access-Control-Allow-Origin': '*' },
    proxy: {
      '/api/*': {
        target: 'http://jsonplaceholder.typicode.com/',
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',
        },
      },
    },
  },
};