games-collector/webpack.config.js at develop · jazzsequence/games-collector · 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
const path = require( 'path' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const CssMinimizerPlugin = require( 'css-minimizer-webpack-plugin' );
const TerserPlugin = require( 'terser-webpack-plugin' );

const isProd = 'production' === process.env.NODE_ENV;

/**
 * Shared module rules for SCSS → CSS compilation (always expanded).
 * Minification is handled separately via CssMinimizerPlugin.
 */
const scssRule = ( testPattern ) => ( {
	test: testPattern,
	use: [
		MiniCssExtractPlugin.loader,
		'css-loader',
		{
			loader: 'postcss-loader',
			options: {
				postcssOptions: {
					plugins: [ 'autoprefixer' ],
				},
			},
		},
		{
			loader: 'sass-loader',
			options: {
				sassOptions: {
					style: 'expanded',
				},
			},
		},
	],
} );

const sharedRules = [
	{
		test: /\.js$/,
		exclude: /(node_modules|bower_components)/,
		use: { loader: 'babel-loader' },
	},
	scssRule( /style\.s?css$/ ),
	scssRule( /editor\.s?css$/ ),
];

/**
 * Config 1: readable (unminified) assets.
 * Outputs main.js, editor.js, main.css, editor.css.
 */
const readableConfig = {
	entry: {
		editor: './assets/js/blocks/index.js',
		main: [ './assets/js/blocks/frontend.js', './assets/js/build/frontend.isotope.js' ],
	},
	output: {
		path: path.resolve( __dirname ),
		filename: 'assets/js/[name].js',
	},
	mode: 'development',
	devtool: false,
	optimization: { minimize: false },
	module: { rules: sharedRules },
	plugins: [
		new MiniCssExtractPlugin( {
			filename: 'assets/css/[name].css',
		} ),
	],
};

/**
 * Config 2: minified assets (only in production).
 * Outputs main.min.js, editor.min.js, main.min.css, editor.min.css.
 */
const minifiedConfig = {
	entry: {
		editor: './assets/js/blocks/index.js',
		main: [ './assets/js/blocks/frontend.js', './assets/js/build/frontend.isotope.js' ],
	},
	output: {
		path: path.resolve( __dirname ),
		filename: 'assets/js/[name].min.js',
	},
	mode: 'production',
	devtool: false,
	optimization: {
		minimize: true,
		minimizer: [
			new TerserPlugin( { extractComments: false } ),
			new CssMinimizerPlugin(),
		],
	},
	module: { rules: sharedRules },
	plugins: [
		new MiniCssExtractPlugin( {
			filename: 'assets/css/[name].min.css',
		} ),
	],
};

module.exports = isProd ? [ readableConfig, minifiedConfig ] : readableConfig;