-
Notifications
You must be signed in to change notification settings - Fork 1
/
webpack.config.js
125 lines (116 loc) · 3.74 KB
/
webpack.config.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
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
function initCanisterEnv () {
let localCanisters, prodCanisters
try {
localCanisters = require(path.resolve(
'.dfx',
'local',
'canister_ids.json'
))
} catch (error) {
console.log('No local canister_ids.json found. Continuing production')
}
try {
prodCanisters = require(path.resolve('canister_ids.json'))
} catch (error) {
console.log('No production canister_ids.json found. Continuing with local')
}
const network =
process.env.DFX_NETWORK ||
(process.env.NODE_ENV === 'production' ? 'ic' : 'local')
const canisterConfig = network === 'local' ? localCanisters : prodCanisters
return Object.entries(canisterConfig).reduce((prev, current) => {
const [canisterName, canisterDetails] = current
prev[canisterName.toUpperCase() + '_CANISTER_ID'] =
canisterDetails[network]
return prev
}, {})
}
const canisterEnvVariables = initCanisterEnv()
const isDevelopment = process.env.NODE_ENV !== 'production'
const frontendDirectory = 'motoko_react_frontend'
const frontendEntry = path.join('src', frontendDirectory, 'src', 'index.html')
module.exports = {
target: 'web',
mode: isDevelopment ? 'development' : 'production',
entry: {
// The frontend.entrypoint points to the HTML file for this build, so we need
// to replace the extension to `.js`.
index: path.join(__dirname, frontendEntry).replace(/\.html$/, '.jsx')
},
devtool: isDevelopment ? 'source-map' : false,
optimization: {
minimize: !isDevelopment,
minimizer: [new TerserPlugin()]
},
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx'],
fallback: {
assert: require.resolve('assert/'),
buffer: require.resolve('buffer/'),
events: require.resolve('events/'),
stream: require.resolve('stream-browserify/'),
util: require.resolve('util/')
}
},
output: {
filename: 'index.js',
path: path.join(__dirname, 'dist', frontendDirectory)
},
// Depending in the language or framework you are using for
// front-end development, add module loaders to the default
// webpack configuration. For example, if you are using React
// modules and CSS as described in the "Adding a stylesheet"
// tutorial, uncomment the following lines:
module: {
rules: [
{ test: /\.(ts|tsx|jsx)$/, loader: 'ts-loader' },
{ test: /\.(css|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.(png|svg|jpg|jpeg|gif)$/, loader: 'url-loader' }
]
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, frontendEntry),
cache: false
}),
new webpack.EnvironmentPlugin({
NODE_ENV: 'development',
...canisterEnvVariables
}),
new webpack.ProvidePlugin({
Buffer: [require.resolve('buffer/'), 'Buffer'],
process: require.resolve('process/browser')
}),
new CopyPlugin({
patterns: [
{
from: `src/${frontendDirectory}/src/.ic-assets.json*`,
to: '.ic-assets.json5',
noErrorOnMissing: true
}
]
})
],
// proxy /api to port 4943 during development.
// if you edit dfx.json to define a project-specific local network, change the port to match.
devServer: {
proxy: {
'/api': {
target: 'http://127.0.0.1:4943',
changeOrigin: true,
pathRewrite: {
'^/api': '/api'
}
}
},
static: path.resolve(__dirname, 'src', frontendDirectory, 'assets'),
hot: true,
watchFiles: [path.resolve(__dirname, 'src', frontendDirectory)],
liveReload: true
}
}