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 CopyWebpackPlugin = require('copy-webpack-plugin')
- const { EnvironmentPlugin, ProvidePlugin } = require('webpack')
- module.exports = {
- mode: 'development',
- devtool: process.env.NODE_ENV === 'development' ? 'eval' : 'source-map', // no 'eval' outside of development
- entry: './javascripts/index.ts',
- output: {
- filename: 'index.js',
- path: path.resolve(__dirname, 'dist'),
- publicPath: '/dist'
- },
- stats: 'errors-only',
- resolve: {
- extensions: ['.tsx', '.ts', '.js', '.css', '.scss']
- },
- module: {
- rules: [
- {
- test: /\.tsx?$/,
- use: 'ts-loader',
- exclude: /node_modules/
- },
- {
- test: /\.css$/i,
- use: ['style-loader', 'css-loader']
- },
- {
- test: /\.s[ac]ss$/i,
- use: [
- MiniCssExtractPlugin.loader,
- {
- loader: 'css-loader',
- options: {
- sourceMap: true,
- url: false
- }
- },
- {
- // Needed to resolve image url()s within @primer/css
- loader: 'resolve-url-loader',
- options: {}
- },
- {
- loader: 'sass-loader',
- options: {
- sassOptions: {
- quietDeps: true,
- includePaths: ['./stylesheets', './node_modules'],
- options: {
- sourceMap: true,
- sourceMapContents: false
- }
- }
- }
- }
- ]
- }
- ]
- },
- plugins: [
- new MiniCssExtractPlugin({
- filename: 'index.css'
- }),
- new CopyWebpackPlugin({
- patterns: [
- { from: 'node_modules/@primer/css/fonts', to: 'fonts' }
- ]
- }),
- new EnvironmentPlugin({
- NODE_ENV: 'development', // use 'development' unless process.env.NODE_ENV is defined
- DEBUG: false
- }),
- new ProvidePlugin({
- process: 'process/browser'
- })
- ]
- }
|