alpine-showcase/webpack.config.js at main · cbspire/alpine-showcase · 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
const glob = require('glob')
const path = require('path')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')

const getEntries = () => {
    const resultBuildFiles = {}
    glob
        .sync(path.resolve(__dirname, 'src/*.{js,css}'))
        .forEach((filePath) => {
            const filename = path.parse(filePath).name;
            const extension = path.extname(filePath).replace('.', '');
            resultBuildFiles[`${extension}/${filename}`] = [filePath];
        });

    return resultBuildFiles;
}

module.exports = (env, argv) => {
  const isProduction = argv.mode === 'production'

  return {
    entry: getEntries(),
    output: {
      path: path.resolve(__dirname, './dist'),
      clean: true,
    },
    module: {
      rules: [
        {
          test: /\.(js)$/,
          exclude: /node_modules/,
          use: 'babel-loader',
        },
        {
          test: /\.css$/i,
          exclude: /(node_modules)/,
          use: {
              loader: MiniCssExtractPlugin.loader,
          },
        },
        {
          test: /\.css$/i,
          exclude: /src/,
          use: ['style-loader' ],
        },
        {
          test: /\.css$/i,
          use: [ 'css-loader' ],
        },
        {
          test: /\.css$/i,
          exclude: /(node_modules)/,
          use: ['postcss-loader'],
        },
      ],
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].css'
      }),
      new RemoveEmptyScriptsPlugin(),
      new CleanWebpackPlugin({
          dry: false,
          cleanOnceBeforeBuildPatterns: [
              path.join(process.cwd(), 'dist/**/*'),
              '!src/**',
          ],
      }),
      new CopyPlugin({
        patterns: [
          {
              from: 'public',
              to: ''
          },
        ],
      })
    ],
    mode: argv.mode,
    devtool: 'source-map',
    devServer: {
      static: {
        directory: path.join(__dirname, 'public'),
      },
      compress: true,
      port: 9000,
    },
    optimization: {
    ... isProduction ? {
          nodeEnv: 'production',
          chunkIds: 'deterministic',
          moduleIds: 'deterministic',
          minimize: true,
          removeAvailableModules: true,
          removeEmptyChunks: true,
          mergeDuplicateChunks: true,
          minimizer: [new TerserPlugin({
              extractComments: false,
              parallel: true,
              terserOptions: {
                  sourceMap: true,
                  compress: {
                      drop_console: false
                  },
                  format: {
                      comments: false
                  },
              },
          })],
      } : {}
    }
  }
}