timer/webpack.config.js at master · ccoode/timer · 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
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin')
const MiniExtractPlugin = require('mini-css-extract-plugin')
const HandleCSS = require('webpack-handle-css-loader')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')

const defaultInclude = [path.resolve(__dirname, 'src')]

module.exports = (env = {}) => {
  const PROD = !!env.production
  const extract = PROD
  const extra = PROD ? '.[contenthash:8]' : ''
  return {
    devtool: PROD ? 'source-map' : 'cheap-module-source-map',
    entry: './src/index.js',
    output: {
      filename: `[name]${extra}.js`,
    },
    mode: PROD ? 'production' : 'development',
    module: {
      rules: [
        {
          test: /\.js$/,
          loader: 'babel-loader',
          include: defaultInclude,
          options: {
            babelrc: false,
            presets: [
              [
                'dgeibi-react',
                {
                  useBuiltins: 'usage',
                },
              ],
            ],
            plugins: ['react-hot-loader/babel'],
          },
        },
        {
          test: /\.wav$/,
          loader: 'file-loader',
          options: {
            outputPath: 'audio/',
          },
        },
        {
          test: /\.(woff|woff2|eot|ttf|svg)(\?[\s\S]+)?$/,
          loader: 'file-loader',
          options: {
            outputPath: 'fonts/',
          },
        },
        new HandleCSS({
          extract,
          minimize: PROD,
          sourceMap: true,
          postcss: {
            ident: 'postcss',
            plugins: loader => [
              require('postcss-import')({ root: loader.resourcePath }),
              require('postcss-preset-env')({
                stage: 3,
                browsers: '> 5%, IE 10',
                features: {
                  'nesting-rules': true,
                },
              }),
              require('postcss-calc')(),
            ],
          },
        }).css(),
      ],
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: 'src/index.ejs',
        inject: 'head',
      }),
      new ScriptExtHtmlWebpackPlugin({
        defaultAttribute: 'async',
        defer: [/^main/],
      }),
      extract &&
        new MiniExtractPlugin({
          filename: `[name]${extra}.css`,
        }),
      env.hot && new webpack.HotModuleReplacementPlugin(),
      PROD && new CleanWebpackPlugin(['dist']),
    ].filter(x => !!x),
    devServer: {
      hot: env.hot,
      open: true,
    },
    ...(PROD && {
      optimization: {
        splitChunks: {
          cacheGroups: {
            react: {
              test: /[\\/]node_modules[\\/](react|react-dom|fbjs)[\\/]/,
              chunks: 'all',
            },
          },
        },
      },
    }),
  }
}