Skip to content

Instantly share code, notes, and snippets.

@caub
Last active June 6, 2021 17:17
Show Gist options
  • Save caub/acaf3c6e79a53aeb42f974b9e18fdc99 to your computer and use it in GitHub Desktop.
Save caub/acaf3c6e79a53aeb42f974b9e18fdc99 to your computer and use it in GitHub Desktop.
react-scripts lite
require('dotenv/config');
const fs = require('fs-extra');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
fs.emptyDirSync(__dirname + '/build');
fs.copySync(__dirname + '/public/', __dirname + '/build/', {
dereference: true,
filter: file => file !== __dirname + '/public/index.html' && file !== __dirname + '/public/customers',
});
const env = {
...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^REACT_APP_/i.test(k))),
NODE_ENV: process.env.NODE_ENV || 'development',
PUBLIC_URL: process.env.PUBLIC_URL,
FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
};
module.exports = {
mode: 'production',
// entry: __dirname + '/src/index.js',
output: {
path: __dirname + '/build',
filename: 'bundle.js',
publicPath: process.env.PUBLIC_URL?.replace(/$(?<!\/)/, '/') || '/',
},
module: {
rules: [
{
test: /\.(js|ts)$/,
use: {
loader: 'babel-loader',
options: {
presets: [
[require('@babel/preset-react').default, { runtime: 'automatic' }],
[require('@babel/preset-env').default, {
targets: {
// browsers: 'last 1 chrome version',
node: 'current',
}
}],
require('@babel/preset-typescript').default,
],
plugins: [
require('@babel/plugin-proposal-numeric-separator').default,
[require('@babel/plugin-proposal-class-properties').default, { loose: true }],
require('@babel/plugin-proposal-optional-chaining').default,
require('@babel/plugin-proposal-nullish-coalescing-operator').default,
],
babelrc: false,
configFile: false,
}
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.scss$/,
use: [
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'sass-loader',
options: {
additionalData: "$fa-font-path: '../node_modules/@fortawesome/fontawesome-pro/webfonts';"
}
}
],
sideEffects: true
},
{
test: /\.(svg|jpe?g|png|woff2?|eot|ttf)$/,
loader: 'file-loader',
}
]
},
resolve: {
extensions: ['.js', '.ts', '.json'],
modules: [
'node_modules',
__dirname + '/node_modules',
__dirname + '/src',
]
},
plugins: [
new HtmlWebpackPlugin({
inject: true,
template: __dirname + '/public/index.html',
}),
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env),
new webpack.DefinePlugin({
'process.env': Object.fromEntries(Object.entries(env).map(([k, v]) => [k, JSON.stringify(v)]))
}),
new MiniCssExtractPlugin({
filename: 'bundle.css',
}),
],
optimization: {
minimize: false
},
node: {
module: 'empty',
dgram: 'empty',
dns: 'mock',
fs: 'empty',
http2: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
},
bail: true,
};
module.exports = config;
if (require.main === module) {
const compiler = webpack(config);
compiler.run((err, stats) => {
console.log(Object.keys(stats.compilation));
console.log(stats.compilation.emittedAssets);
console.error(...stats.compilation.errors);
if (err) throw err;
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment