dlib/webpack.config.js at develop · savaslabs/dlib · 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
const path = require('path');
const webpack = require('webpack');

// Import dependencies.
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = (env, arg) => {
  const isProduction = arg.mode === 'production' ? true : false;
  return {
    mode: isProduction ? 'production' : 'development',
    entry: path.resolve(__dirname, 'app/index.js'),
    output: {
      path: path.resolve(__dirname, 'dist'),
      chunkFilename: 'js/[name].[contenthash].bundle.js',
      filename: 'js/[name].[contenthash].js',
      publicPath: '/',
    },
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
      },
      minimize: true,
      minimizer: [new TerserPlugin({ parallel: true })],
    },
    devServer: {
      historyApiFallback: true,
    },
    module: {
      rules: [
        // Javascript
        {
          test: /\.(js)$/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: [
                  [
                    '@babel/preset-env',
                    {
                      targets: 'defaults',
                    },
                  ],
                ],
                plugins: [['babel-plugin-styled-components', { pure: true }]],
              },
            },
            {
              loader: 'stylelint-custom-processor-loader',
              options: {
                configPath: path.resolve(__dirname, '.stylelintrc'),
              },
            },
          ],
        },
        // CSS
        {
          test: /\.(css)$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
                config: { path: path.resolve(__dirname, 'postcss.config.js') },
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              },
            },
          ],
        },
        // Assets
        {
          test: /\.(woff|woff2|eot|ttf|svg|ico|jpe?g|png)$/,
          use: 'file-loader',
        },
      ],
    },
    /**
     * Plugins.
     *
     * Add all common plugins.
     *
     * MiniCssExtractPlugin()
     * A Lightweight CSS extraction webpack plugin.
     */
    plugins: [
      new HtmlWebpackPlugin({
        template: 'app/index.html',
      }),
      new MiniCssExtractPlugin({
        filename: 'index.css',
        path: path.resolve(__dirname, 'dist'),
      }),
      new webpack.NoEmitOnErrorsPlugin(),
      new webpack.optimize.OccurrenceOrderPlugin(),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1,
      }),
      new FixStyleOnlyEntriesPlugin(),
      new FriendlyErrorsWebpackPlugin(),
    ],
    stats: 'errors-only',
  };
};