fe-base-2020/webpack.config.js at main · raveneyex/fe-base-2020 · 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
/**
 * Raveneyex's 2020 Front-End Stack
 * Made by @raveneyex
 *
 * Hail Satan!
 */

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const TerserPlugin = require('terser-webpack-plugin');

// Output config
const output = {
  filename: '[name].bundle.js',
  path: path.resolve(__dirname, 'public')
};

// Config for webpack-dev-server
const devServer = {
  contentBase: path.resolve(__dirname, 'public/assets'),
  stats: 'errors-only',
  open: true,
  port: 8080,
  compress: true
};

// Plugins list
const plugins = [
  new HtmlWebpackPlugin({
    template: 'index.html',
    favicon: 'assets/favicon.ico'
  }),
  new CleanWebpackPlugin(),
  new MiniCssExtractPlugin({ filename: 'index.css' }),
  new BundleAnalyzerPlugin()
];

// File-loader config
const fileLoaderRule = {
  test: /\.(jpg|png|gif|svg)$/,
  exclude: /node_modules/,
  use: [{
    loader: 'file-loader',
    options: {
      name: '[name].[ext]',
      outputPath: './assets/'
    }
  }]
};

const sassLoadersRule = {
  test: /\.s?css$/,
  exclude: /node_modules/,
  use: [
    'style-loader',
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true
      }
    },
    'postcss-loader'
  ]
};

const jsLoaderRule = {
  test: /\.jsx?$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env', '@babel/preset-react']
    }
  }
};

// Rules
const rules = [fileLoaderRule, sassLoadersRule, jsLoaderRule];

const baseConfig = {
  context: path.resolve(__dirname, 'src/main'),
  entry: './index.js',
  output,
  plugins,
  devServer,
  devtool: 'eval-sourcemap',
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules
  },
};

const prodConfig = {
  ...baseConfig,
  devtool: false,
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
    splitChunks: {
      cacheGroups: {
        vendor: {
          name: "node_vendors",
          test: /[\\/]node_modules[\\/]/,
          chunks: "all"
        }
      }
    }
  }
};

// Config object
module.exports = function(env = { production: false }) {
  return env.production ? prodConfig : baseConfig;
};