blocklib/webpack.config.js at main · doubledropco/blocklib · 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
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const DependencyExtractionWebpackPlugin = require( '@wordpress/dependency-extraction-webpack-plugin' );

const { WEBPACK_ENV } = process.env;

const PLUGIN_NAME = path.basename(process.cwd());
const BUILD_DIR = path.resolve(__dirname, 'dist');
const MODE = WEBPACK_ENV === 'development' ? 'development' : 'production';
const DEVTOOL = WEBPACK_ENV === 'development' ? 'cheap-module-source-map' : 'source-map';
const FILE_NAMING_PATTERN = '[name].[ext]';

module.exports = {
	mode: MODE,
	devtool: DEVTOOL,
	entry: {
		'main': [
			'./src/main.ts',
			'./src/main.scss',
		],
	},
	output: {
		filename: FILE_NAMING_PATTERN.replace('[ext]', 'js'),
		path: path.resolve(BUILD_DIR),
		publicPath: `/wp-content/plugins/${PLUGIN_NAME}/dist/`,
	},
	optimization: {
		minimize: WEBPACK_ENV === 'development' ? false : true,
		minimizer: [new TerserPlugin()],
	},
	plugins: [
		new DependencyExtractionWebpackPlugin(),
		new MiniCssExtractPlugin({
			filename: FILE_NAMING_PATTERN.replace('[ext]', 'css'),
			chunkFilename: FILE_NAMING_PATTERN.replace('[ext]', 'css').replace('[name]', '[id]'),
		}),
	],
	resolve: {
		extensions: ['.tsx', '.ts', '.js', '.css', '.scss'],
		plugins: [
			new TsconfigPathsPlugin({
				configFile: path.resolve(__dirname, 'tsconfig.json'),
			})
		],
	},
	module: {
		rules: [
			{
				test: /\.tsx?$/,
				use: [
					{
						loader: 'babel-loader',
					},
					{
						loader: 'ts-loader'
					}
				],
				exclude: /node_modules/,
			},
			{
				test: /\.jsx?$/,
				exclude: /(node_modules)/,
				use: [
					'babel-loader',
				]
			},
			{
				test: /\.s?css$/,
				use: [
					MiniCssExtractPlugin.loader,
					{
						loader: 'css-loader',
					},
					{
						loader: 'postcss-loader',
						options: {
							sourceMap: true,
						}
					},
					{
						loader: 'sass-loader',
						options: {
							sourceMap: true,
						}
					}
				]
			},
			{
				test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg)$/,
				use: [
					{
						loader: 'file-loader',
						options: {
							name: '[name].[ext]',
						},
					}
				]
			},
		]
	},
};