-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.common.js
129 lines (115 loc) · 3.78 KB
/
webpack.common.js
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const paths = require('./paths')
const options = [
createTarget({ entry: 'index', outputType: 'amd-require', template: 'template', file: 'index' }),
createTarget({ entry: 'wrapper_index', outputType: 'global', template: 'wrapper_template', file: 'wrapper_index' })
];
module.exports = options[0]; // full app
// module.exports = options[1]; // dynamic loading
function createTarget({ entry, outputType, template, file }) {
const options =
{
name: entry,
// Where webpack looks to start building the bundle
entry: paths.src + `/${entry}.js`,
externals: {
'node-fetch': { amd: 'node-fetch', global: 'fetch' },
'requirejs': 'requirejs',
'dompurify': { amd: 'dompurify', global: 'DOMPurify' },
// 'date-fns': { amd: 'date-fns', global: 'dateFns' }, // example of pre-bundling date-fns
'papaparse': 'papaparse',
'monaco-editor': { amd: 'monaco-editor', global: 'monaco' },
'preact': 'preact',
'@yaireo/tagify': {amd: '@yaireo/tagify', global: 'Tagify' },
'interactjs': { amd: 'interactjs', global: 'interact' },
'echarts': 'echarts',
'acorn': 'acorn',
'eta': { amd: 'eta', global: 'Eta' },
'@floating-ui/dom': { amd: '@floating-ui/dom', global: 'FloatingUIDOM' }
},
// Where webpack outputs the assets and bundles
output: {
path: paths.build,
filename: '[name].bundle.js',
publicPath: '/',
library: {
type: outputType
}
},
// Customize the webpack build process
plugins: [
// Removes/cleans build folders and unused assets when rebuilding
// new CleanWebpackPlugin(),
// Copies files from target to destination folder
new CopyWebpackPlugin({
patterns: [
{
from: paths.public,
to: 'assets',
globOptions: {
ignore: ['*.DS_Store'],
},
noErrorOnMissing: true,
},
],
}),
new CopyWebpackPlugin(
{
patterns: [{
from: 'node_modules/@sqlframes/repl-app/dist/libs.mjs', to: 'js/sqlframes/libs.mjs'
},{
from: 'node_modules/@sqlframes/repl-app/dist/main.mjs', to: 'js/sqlframes/main.mjs'
},
]
}),
new CopyWebpackPlugin(
{
patterns: [{
from: 'node_modules/@sqlframes/repl-app/dist/api.d.ts', to: 'api/api.d.ts' },
]
}),
new CopyWebpackPlugin(
{
patterns: [{
from: 'node_modules/@sqlframes/repl-app/dist/styles/themes/*', to: 'styles/themes/[name][ext]' },
]
}),
// Generates an HTML file from a template
// Generates deprecation warning: https://github.com/jantimon/html-webpack-plugin/issues/1501
new HtmlWebpackPlugin({
title: 'SQL Frames + React DEMO',
// favicon: paths.src + '/images/favicon.png',
template: paths.src + `/${template}.html`, // template file
filename: `${file}.html`, // output file
}),
],
// Determine how modules within the project are treated
module: {
rules: [
// JavaScript: Use Babel to transpile JavaScript files
{ test: /\.js$/, use: ['babel-loader'] },
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
// Images: Copy image files to build folder
{ test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' },
// Fonts and SVGs: Inline files
{ test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: 'asset/inline' },
],
},
resolve: {
modules: [paths.src, 'node_modules'],
conditionNames: ['import'],
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
alias: {
'@': paths.src,
assets: paths.public,
},
},
}
return options;
}