three-houses-syllabus/webpack.config.js at master · kcgidw/three-houses-syllabus · 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
const path = require('path');
const _ = require('lodash');
const CssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = (env) => {
	const config = {
		entry: {
			'index': path.resolve(__dirname, 'src', 'js', 'index.js'),
		},
		output: {
			path: path.resolve(__dirname, 'dist', 'js'),
			filename: '[name].bundle.min.js'
		},
		module: {
			rules: [
				{
					test: [/\.js$/, /\.jsx$/],
					exclude: /node_modules/,
					use: [
						{
							loader: 'source-map-loader'
						},
						{
							loader: 'babel-loader',
							options: {
								presets: [
									[
										'@babel/preset-env',
									]
								],
							}
						},
					]
				},
				{
					test: /\.(sa|sc|c)ss$/,
					use: [
						CssExtractPlugin.loader,
						{
							loader: "css-loader",
							options: {
								sourceMap: true,
							}
						},
						{
							loader: 'sass-loader',
							options: {
								sourceMap: true
							}
						}
					]
				},
				{
					test: /\.(png|jpg|gif)$/,
					use: [
						{
							loader: 'url-loader',
							options: {
								limit: 8192,
							},
						},
					],
				},
			],
		},
		resolve: {
			extensions: [".js", ".jsx"],
			alias: {
				'assets': path.resolve(__dirname, 'assets'),
			}
		},
		plugins: [
			new CssExtractPlugin({
				filename: '../style.css',
				ignoreOrder: false
			}),
			new CopyWebpackPlugin([
				{from: 'src/data.json', to: '../data.json'},
				{from: 'src/index.html', to: '../index.html'},
				{from: 'assets/church-on-sunday.svg', to: '../assets/church-on-sunday.svg'},
				{from: 'assets/images/portraits/', to: '../assets/images/portraits/'},
			]),
		],
		devServer: {
    		contentBase: path.resolve(__dirname, 'dist'),
			compress: true,
			index: 'index.html',
			publicPath: '/js/',
			hot: true,
			port: 3000,
		},
	};

	if (env.production) {
		_.merge(config, {
			mode: 'production',
			optimization: {
				minimize: true,
				minimizer: [new TerserPlugin({ sourceMap: false }),]
			},
		});
	} else if (env.development) {
		_.merge(config, {
			mode: 'development',
			devtool: 'source-map',
		});
	} else {
		throw new Error('Bad webpack env');
	}

	return config;
};