123 lines
3.2 KiB
JavaScript
123 lines
3.2 KiB
JavaScript
// web/webpack.config.js
|
|
|
|
const path = require('path');
|
|
const webpack = require('webpack');
|
|
|
|
const appDirectory = path.resolve(__dirname, '../');
|
|
|
|
// This is needed for webpack to compile JavaScript.
|
|
// 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: /\.(ts|tsx|js|jsx)?$/,
|
|
// Add every directory that needs to be compiled by Babel during the build.
|
|
include: [
|
|
path.resolve(appDirectory, 'index.web.tsx'),
|
|
path.resolve(appDirectory, 'src'),
|
|
/node_modules\/react-native-/,
|
|
],
|
|
// exclude: [path.resolve(appDirectory, 'node_modules')],
|
|
use: {
|
|
loader: 'babel-loader',
|
|
options: {
|
|
cacheDirectory: true,
|
|
// The 'react-native' preset is recommended to match React Native's packager
|
|
// presets: ['module:metro-react-native-babel-preset'],
|
|
// presets: ['react-native'],
|
|
|
|
presets: ['module:metro-react-native-babel-preset'],
|
|
plugins: [
|
|
// needed to support async/await
|
|
// '@babel/plugin-transform-runtime',
|
|
'react-native-web',
|
|
[
|
|
'module-resolver',
|
|
{
|
|
alias: {
|
|
'^react-native$': 'react-native-web',
|
|
},
|
|
},
|
|
],
|
|
],
|
|
},
|
|
},
|
|
};
|
|
|
|
// This is needed for webpack to import static images in JavaScript files.
|
|
const imageLoaderConfiguration = {
|
|
test: /\.(gif|jpe?g|png|svg)$/,
|
|
use: {
|
|
loader: 'url-loader',
|
|
options: {
|
|
name: '[name].[ext]',
|
|
},
|
|
},
|
|
};
|
|
|
|
const ttfLoaderConfiguration = {
|
|
test: /\.ttf$/,
|
|
loader: 'url-loader', // or directly file-loader
|
|
include: [
|
|
path.resolve(appDirectory, 'node_modules/react-native-vector-icons'),
|
|
path.resolve(appDirectory, 'web/public/fonts'),
|
|
],
|
|
};
|
|
|
|
module.exports = {
|
|
mode: 'development',
|
|
target: 'web',
|
|
devServer: {
|
|
headers: {
|
|
'Access-Control-Allow-Origin': '*',
|
|
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
|
|
'Access-Control-Allow-Headers':
|
|
'X-Requested-With, content-type, Authorization',
|
|
},
|
|
},
|
|
entry: [
|
|
// load any web API polyfills
|
|
// path.resolve(appDirectory, 'polyfills-web.js'),
|
|
//'babel-polyfill',
|
|
// your web-specific entry file
|
|
path.resolve(appDirectory, 'index.web.tsx'),
|
|
],
|
|
|
|
// configures where the build ends up
|
|
output: {
|
|
filename: 'bundle.web.js',
|
|
path: path.resolve(appDirectory, 'dist'),
|
|
},
|
|
// ...the rest of your config
|
|
|
|
module: {
|
|
rules: [
|
|
babelLoaderConfiguration,
|
|
imageLoaderConfiguration,
|
|
ttfLoaderConfiguration,
|
|
],
|
|
},
|
|
|
|
resolve: {
|
|
// This will only alias the exact import "react-native"
|
|
alias: {
|
|
'react-native$': 'react-native-web',
|
|
'@caj': path.resolve(appDirectory, 'src/caj'),
|
|
},
|
|
// 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`.
|
|
extensions: [
|
|
'.web.js',
|
|
'.web.jsx',
|
|
'.js',
|
|
'.jsx',
|
|
'.web.ts',
|
|
'.ts',
|
|
'.web.tsx',
|
|
'.tsx',
|
|
],
|
|
},
|
|
};
|