wp-integrator-x/webpack.config.js at main · Msalah11/wp-integrator-x · 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
const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const defaultConfig = require("@wordpress/scripts/config/webpack.config");

const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
    ...defaultConfig,
	mode: isProduction ? 'production' : 'development',
	devtool: isProduction ? false : 'source-map',
	entry: {
		'drivetestpage': './src/googledrive-page/main.jsx',
	},

	output: {
		path: path.resolve(__dirname, 'assets/js'),
		filename: '[name].min.js',
		publicPath: '../../',
		assetModuleFilename: 'images/[name][ext][query]',
	},

	resolve: {
		extensions: ['.js', '.jsx'],
	},

	module: {
        ...defaultConfig.module,
		rules: [
            //...defaultConfig.module.rules,
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: 'babel-loader',
			},
			{
				test: /\.(css|scss)$/,
				exclude: /node_modules/,
				use: [
					'style-loader',
					{
						loader: MiniCssExtractPlugin.loader,
						options: {
							esModule: false,
						},
					},
					{
						loader: 'css-loader',
					},
					'sass-loader',
				],
			},
			{
				test: /\.svg/,
				type: 'asset/inline',
			},
			{
				test: /\.(png|jpg|gif)$/,
				type: 'asset/resource',
				generator: {
					filename: '../images/[name][ext][query]',
				},
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/,
				type: 'asset/resource',
				generator: {
					filename: '../fonts/[name][ext][query]',
				},
			},
		],
	},

	plugins: [
        ...defaultConfig.plugins,
		new CleanWebpackPlugin(),
		new MiniCssExtractPlugin({
			filename: '../css/[name].min.css',
		}),
	],

	optimization: {
		minimize: isProduction,
		minimizer: isProduction ? [
			new TerserPlugin({
				terserOptions: {
					format: {
						comments: false,
					},
					compress: {
						drop_console: true,
						drop_debugger: true,
					},
				},
				extractComments: false,
			}),
		] : [],
		splitChunks: isProduction ? {
			chunks: 'all',
			cacheGroups: {
				vendor: {
					test: /[\\/]node_modules[\\/]/,
					name: 'vendors',
					chunks: 'all',
				},
			},
		} : false,
	},

	performance: isProduction ? {
		maxAssetSize: 250000,
		maxEntrypointSize: 250000,
		hints: 'warning',
	} : false,
}