toolkit-docs/webpack.config.js at master · oblik/toolkit-docs · 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
const path = require('path')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const BrowserSyncWebpackPlugin = require('browser-sync-webpack-plugin')

module.exports = {
	entry: {
		main: './src/js/index.ts',
		examples: './src/js/examples.ts',
		polyfills: './src/js/polyfills.ts',

		'carousel': './content/examples/carousel/script.js',
		'carousel-watcher': './content/examples/carousel-watcher/script.js',
		'custom-component': './content/examples/custom-component/script.js',
		'custom-subcomponent': './content/examples/custom-subcomponent/script.js',
		'loader-animated': './content/examples/loader-animated/script.js',
		'tippy': './content/examples/tippy/script.js'
	},
	output: {
		path: path.resolve(__dirname, 'assets')
	},
	resolve: {
		extensions: ['.ts', '.js']
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: '[name].css'
		}),
		new BrowserSyncWebpackPlugin({
			host: 'toolkit-docs.work',
			proxy: 'http://toolkit-docs.work',
			port: 3000,
			open: false,
			files: [
				'site/**/*.php',
				'content/**/*.txt'
			]
		})
	],
	module: {
		rules: [
			{
				test: /\.(t|j)s$/,
				exclude: /node_modules/,
				loader: 'ts-loader',
				options: {
					transpileOnly: true
				}
			},
			{
				test: /\.css$/,
				use: [
					MiniCssExtractPlugin.loader,
					{
						loader: 'css-loader',
					},
					{
						loader: 'postcss-loader'
					}
				]
			},
			{
				test: /\.ttf$/,
				loader: 'file-loader',
				options: {
					name: '[name].[ext]',
					outputPath: 'fonts'
				}
			},
			{
				test: /\.svg$/,
				loader: 'file-loader',
				options: {
					name: '[name].[ext]',
					outputPath: 'images'
				}
			}
		]
	}
}