shrub/pkg/interface/config/webpack.dev.js
2022-03-15 10:17:30 -05:00

135 lines
3.4 KiB
JavaScript

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const urbitrc = require('./urbitrc');
const _ = require('lodash');
const { execSync } = require('child_process');
const GIT_DESC = execSync('git describe --always', { encoding: 'utf8' }).trim();
let devServer = {
hot: true,
port: 9000,
host: '0.0.0.0',
disableHostCheck: true,
historyApiFallback: {
index: '/apps/landscape/index.html',
disableDotRule: true
}
};
const router = _.mapKeys(urbitrc.FLEET || {}, (value, key) => `${key}.localhost:9000`);
if(urbitrc.URL) {
devServer = {
...devServer,
// headers: {
// 'Service-Worker-Allowed': '/'
// },
proxy: [
{
context: (path) => {
console.log(path);
if(path === '/apps/landscape/desk.js') {
return true;
}
return !path.startsWith('/apps/landscape');
},
changeOrigin: true,
target: urbitrc.URL,
router
}
]
};
}
module.exports = {
mode: 'development',
entry: {
app: './src/index.tsx'
// serviceworker: './src/serviceworker.js'
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/typescript', ['@babel/preset-react', {
runtime: 'automatic',
development: true
}]],
plugins: [
'@babel/transform-runtime',
'@babel/plugin-proposal-object-rest-spread',
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-class-properties',
process.env.NODE_ENV !== 'production' && 'react-refresh/babel'
]
}
},
exclude: /node_modules\/(?!(@tlon\/indigo-dark|@tlon\/indigo-light|@tlon\/indigo-react|@urbit\/api)\/).*/
},
{
test: /\.css$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader'
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
]
}
]
},
resolve: {
extensions: ['.js', '.ts', '.tsx']
},
devtool: 'inline-source-map',
devServer: devServer,
plugins: [
new webpack.DefinePlugin({
'process.env.LANDSCAPE_SHORTHASH': JSON.stringify(GIT_DESC),
'process.env.LANDSCAPE_STORAGE_VERSION': JSON.stringify(Date.now()),
'process.env.LANDSCAPE_LAST_WIPE': JSON.stringify('2021-10-20'),
}),
// new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Groups',
template: './public/index.html'
}),
process.env.NODE_ENV !== 'production' && new ReactRefreshWebpackPlugin()
],
watch: true,
output: {
filename: (pathData) => {
return pathData.chunk.name === 'app' ? 'index.js' : '[name].js';
},
chunkFilename: '[name].js',
path: path.resolve(__dirname, '../dist'),
publicPath: '/apps/landscape/',
globalObject: 'this'
},
optimization: {
minimize: false,
usedExports: true
}
};