-
Notifications
You must be signed in to change notification settings - Fork 13
/
webpack.config.js
132 lines (121 loc) · 3.75 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
126
127
128
129
130
131
132
// web/webpack.config.js
const path = require('path');
const webpack = require('webpack');
const appDirectory = path.resolve(__dirname, './');
// Many OSS React Native packages are not compiled to ES5 before being
// published. If you depend on uncompiled packages they may cause webpack build
// errors. To fix this webpack can be configured to compile to the necessary
// 'node_module'.
const babelLoaderConfiguration = {
test: /\.js$/,
// Add every directory that needs to be compiled by Babel during the build.
include: [
path.resolve(appDirectory, 'src'),
path.resolve(appDirectory, 'node_modules/react-navigation'),
path.resolve(appDirectory, 'node_modules/react-native-'),
path.resolve(appDirectory, 'node_modules/@expo/samples'),
path.resolve(appDirectory, 'node_modules/@expo/vector-icons'),
],
use: {
loader: 'babel-loader',
options: {
// cacheDirectory: false,
babelrc: false,
// Babel configuration (or use .babelrc)
// This aliases 'react-native' to 'react-native-web' and includes only
// the modules needed by the app.
plugins: [
'expo-web',
'react-native-web',
'transform-decorators-legacy',
[
'transform-runtime',
{ helpers: false, polyfill: false, regenerator: true },
],
],
// The 'react-native' preset is recommended to match React Native's packager
presets: ['react-native'],
},
},
};
// This is needed for loading css
const cssLoaderConfiguration = {
test: /\.css$/,
use: ['style-loader', 'css-loader'],
};
const imageLoaderConfiguration = {
test: /\.(gif|jpe?g|png|svg)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
};
const ttfLoaderConfiguration = {
test: /\.ttf$/,
use: [
{
loader: 'file-loader',
options: {
name: './fonts/[hash].[ext]',
},
},
],
include: [
path.resolve(appDirectory, './src/assets/fonts'),
path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
path.resolve(appDirectory, 'node_modules/@expo/vector-icons/fonts'),
path.resolve(
appDirectory,
'node_modules/expo-web/node_modules/react-native-vector-icons/Fonts',
),
path.resolve(
appDirectory,
'node_modules/expo/node_modules/@expo/vector-icons/fonts',
),
],
};
module.exports = {
// your web-specific entry file
entry: path.resolve(appDirectory, 'src/index.js'),
devtool: 'cheap-module-source-map',
// configures where the build ends up
output: {
filename: 'bundle.js',
publicPath: '/assets/',
path: path.resolve(appDirectory, './public/assets'),
},
module: {
rules: [
babelLoaderConfiguration,
cssLoaderConfiguration,
imageLoaderConfiguration,
ttfLoaderConfiguration,
],
},
plugins: [
// process.env.NODE_ENV === 'production' must be true for production
// builds to eliminate development checks and reduce build size. You may
// wish to include additional optimizations.
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
__DEV__: process.env.NODE_ENV === 'production' || true,
}),
],
resolve: {
// If you're working on a multi-platform React Native app, web-specific
// module implementations should be written in files using the extension
// '.web.js'.
symlinks: false,
extensions: ['.web.js', '.js'],
alias: {
'./assets/images/expo-icon.png': './assets/images/[email protected]',
'./assets/images/slack-icon.png': './assets/images/[email protected]',
'@expo/vector-icons': 'expo-web',
expo: 'expo-web',
'react-native': 'react-native-web',
'react-native-svg': 'react-native-svg-web',
},
},
};