Fix webpack dev build
This commit is contained in:
Paul Bienkowski
parent
9ade5ecc7a
commit
66ab9a73ef
1353
frontend/package-lock.json
generated
1353
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -3,8 +3,8 @@
|
|||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"start": "webpack-dev-server",
|
||||
"build": "NODE_ENV=production webpack"
|
||||
"start": "webpack-dev-server --mode development",
|
||||
"build": "webpack --mode production"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.16.3",
|
||||
|
|
@ -14,6 +14,10 @@
|
|||
"luxon": "^1.28.0",
|
||||
"maplibre-gl": "^1.15.2",
|
||||
"pkce": "^1.0.0-beta2",
|
||||
"postcss-flexbugs-fixes": "^5.0.2",
|
||||
"postcss-loader": "^6.2.1",
|
||||
"postcss-normalize": "^10.0.1",
|
||||
"postcss-preset-env": "^7.0.1",
|
||||
"proj4": "^2.7.5",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
|
|
@ -24,6 +28,7 @@
|
|||
"react-router-dom": "^5.3.0",
|
||||
"redux": "^4.1.2",
|
||||
"redux-localstorage": "^0.4.1",
|
||||
"resolve-url-loader": "^4.0.0",
|
||||
"rxjs": "^6.6.7",
|
||||
"rxjs-hooks": "^0.6.2",
|
||||
"sass": "^1.43.5",
|
||||
|
|
|
|||
|
|
@ -3,34 +3,140 @@ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'
|
|||
|
||||
const path = require('path')
|
||||
|
||||
const isDevelopment = process.env.NODE_ENV !== 'production'
|
||||
|
||||
const API_URL = process.env.API_URL || 'http://localhost:3000'
|
||||
const BASE_URL = process.env.BASE_URL || isDevelopment ? 'http://localhost:3001' : '__BASE_HREF__'
|
||||
const PORT = process.env.PORT || 3001
|
||||
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'
|
||||
|
||||
|
||||
module.exports = {
|
||||
entry: './src/index.js',
|
||||
mode: isDevelopment ? 'development' : 'production',
|
||||
cache: isDevelopment && {type: 'filesystem'},
|
||||
devtool: 'eval-cheap-module-source-map',
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'build'),
|
||||
filename: 'bundle.js',
|
||||
const resolveApp = (relativePath) => path.resolve(__dirname, relativePath)
|
||||
const appSrc = resolveApp('src')
|
||||
|
||||
module.exports = function (webpackEnv) {
|
||||
const isEnvProduction = webpackEnv === 'production'
|
||||
const isEnvDevelopment = !isEnvProduction
|
||||
|
||||
const apiUrl = process.env.API_URL || 'http://localhost:3000'
|
||||
const baseUrl = process.env.BASE_URL || isEnvDevelopment ? 'http://localhost:3001' : '__BASE_HREF__'
|
||||
const port = process.env.PORT || 3001
|
||||
|
||||
|
||||
const getStyleLoaders = (modules, withLess) => {
|
||||
const sourceMap = isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
|
||||
const loaders = [
|
||||
isEnvDevelopment && require.resolve('style-loader'),
|
||||
isEnvProduction && {
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
// css is located in `static/css`, use '../../' to locate index.html folder
|
||||
// in production `paths.publicUrlOrPath` can be a relative path
|
||||
// options: paths.publicUrlOrPath.startsWith('.')
|
||||
// ? { publicPath: '../../' }
|
||||
// : {},
|
||||
},
|
||||
cache: false,
|
||||
{
|
||||
loader: require.resolve('css-loader'),
|
||||
options: {
|
||||
modules,
|
||||
importLoaders: withLess ? 2 : 1,
|
||||
sourceMap,
|
||||
},
|
||||
},
|
||||
{
|
||||
// Options for PostCSS as we reference these options twice
|
||||
// Adds vendor prefixing based on your specified browser support in
|
||||
// package.json
|
||||
loader: require.resolve('postcss-loader'),
|
||||
options: {
|
||||
postcssOptions: {
|
||||
// Necessary for external CSS imports to work
|
||||
// https://github.com/facebook/create-react-app/issues/2677
|
||||
ident: 'postcss',
|
||||
plugins: [
|
||||
'postcss-flexbugs-fixes',
|
||||
[
|
||||
'postcss-preset-env',
|
||||
{
|
||||
autoprefixer: {
|
||||
flexbox: 'no-2009',
|
||||
},
|
||||
stage: 3,
|
||||
},
|
||||
],
|
||||
// Adds PostCSS Normalize as the reset css with default options,
|
||||
// so that it honors browserslist config in package.json
|
||||
// which in turn let's users customize the target behavior as per their needs.
|
||||
'postcss-normalize',
|
||||
],
|
||||
},
|
||||
sourceMap,
|
||||
},
|
||||
},
|
||||
].filter(Boolean)
|
||||
if (withLess) {
|
||||
loaders.push(
|
||||
// {
|
||||
// loader: require.resolve('resolve-url-loader'),
|
||||
// options: {
|
||||
// sourceMap,
|
||||
// root: appSrc,
|
||||
// },
|
||||
// },
|
||||
{
|
||||
loader: require.resolve('less-loader'),
|
||||
options: {
|
||||
lessOptions: {
|
||||
math: 'always',
|
||||
},
|
||||
// sourceMap: true,
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
return loaders
|
||||
}
|
||||
|
||||
return {
|
||||
entry: './src/index.js',
|
||||
mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
|
||||
cache: isEnvDevelopment && {type: 'filesystem'},
|
||||
devtool: isEnvProduction
|
||||
? shouldUseSourceMap
|
||||
? 'source-map'
|
||||
: false
|
||||
: isEnvDevelopment && 'cheap-module-source-map',
|
||||
output: {
|
||||
// The build folder.
|
||||
path: path.resolve(__dirname, 'build'),
|
||||
// Add /* filename */ comments to generated require()s in the output.
|
||||
pathinfo: isEnvDevelopment,
|
||||
// There will be one main bundle, and one file per asynchronous chunk.
|
||||
// In development, it does not produce real files.
|
||||
filename: isEnvProduction ? 'static/js/[name].[contenthash:8].js' : isEnvDevelopment && 'static/js/bundle.js',
|
||||
// There are also additional JS chunk files if you use code splitting.
|
||||
chunkFilename: isEnvProduction
|
||||
? 'static/js/[name].[contenthash:8].chunk.js'
|
||||
: isEnvDevelopment && 'static/js/[name].chunk.js',
|
||||
assetModuleFilename: 'static/media/[name].[hash][ext]',
|
||||
// webpack uses `publicPath` to determine where the app is being served from.
|
||||
// It requires a trailing slash, or the file assets will get an incorrect path.
|
||||
// We inferred the "public path" (such as / or /my-project) from homepage.
|
||||
// publicPath: paths.publicUrlOrPath,
|
||||
//
|
||||
// Point sourcemap entries to original disk location (format as URL on Windows)
|
||||
devtoolModuleFilenameTemplate: isEnvProduction
|
||||
? (info) => path.relative(appSrc, info.absoluteResourcePath).replace(/\\/g, '/')
|
||||
: isEnvDevelopment && ((info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
|
||||
},
|
||||
|
||||
resolve: {
|
||||
extensions: ['.tsx', '.ts', '.js'],
|
||||
alias: {
|
||||
'mapbox-gl': 'maplibre-gl',
|
||||
'../../theme.config': path.resolve('./src/semantic-ui/theme.config'),
|
||||
'../../themes/default': 'fomantic-ui-less/themes/default',
|
||||
},
|
||||
modules: ['node_modules', 'src'],
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
base: BASE_URL,
|
||||
base: baseUrl,
|
||||
meta: {
|
||||
charset: 'utf-8',
|
||||
viewport: 'width=device-width, initial-scale=1',
|
||||
|
|
@ -42,10 +148,10 @@ module.exports = {
|
|||
manifest: 'public/manifest.json',
|
||||
}),
|
||||
|
||||
isDevelopment && new ReactRefreshWebpackPlugin(),
|
||||
isEnvDevelopment && new ReactRefreshWebpackPlugin(),
|
||||
].filter(Boolean),
|
||||
devServer: {
|
||||
port: PORT,
|
||||
port,
|
||||
hot: true,
|
||||
compress: true,
|
||||
historyApiFallback: true,
|
||||
|
|
@ -54,18 +160,19 @@ module.exports = {
|
|||
serveIndex: true,
|
||||
},
|
||||
client: {
|
||||
webSocketURL: `ws://0.0.0.0:${PORT}/ws`,
|
||||
webSocketURL: `ws://0.0.0.0:${port}/ws`,
|
||||
},
|
||||
proxy: {
|
||||
'/api': API_URL,
|
||||
'/login': API_URL,
|
||||
'/api': apiUrl,
|
||||
'/login': apiUrl,
|
||||
},
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(mjs|js|jsx|ts|tsx)$/,
|
||||
include: path.resolve('./src'),
|
||||
// include: path.resolve('./src'),
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
|
|
@ -77,7 +184,7 @@ module.exports = {
|
|||
inputSourceMap: true,
|
||||
|
||||
plugins: [
|
||||
isDevelopment && 'react-refresh/babel',
|
||||
isEnvDevelopment && 'react-refresh/babel',
|
||||
[
|
||||
'@babel/plugin-transform-runtime',
|
||||
{
|
||||
|
|
@ -91,7 +198,7 @@ module.exports = {
|
|||
[
|
||||
'@babel/preset-react',
|
||||
{
|
||||
development: isDevelopment,
|
||||
development: isEnvDevelopment,
|
||||
runtime: 'automatic',
|
||||
},
|
||||
],
|
||||
|
|
@ -103,44 +210,19 @@ module.exports = {
|
|||
},
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: ['style-loader', 'css-loader'],
|
||||
sideEffects: true,
|
||||
},
|
||||
{
|
||||
test: /\.module\.less$/i,
|
||||
use: [
|
||||
// compiles Less to CSS
|
||||
'style-loader',
|
||||
{loader: 'css-loader', options: {modules: true}},
|
||||
{
|
||||
loader: 'less-loader',
|
||||
options: {
|
||||
lessOptions: {
|
||||
math: 'always',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
use: getStyleLoaders(false),
|
||||
sideEffects: true,
|
||||
},
|
||||
{
|
||||
test: /\.less$/i,
|
||||
exclude: /\.module\.less$/i,
|
||||
use: [
|
||||
// compiles Less to CSS
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
{
|
||||
loader: 'less-loader',
|
||||
options: {
|
||||
lessOptions: {
|
||||
math: 'always',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
use: getStyleLoaders(false, true),
|
||||
sideEffects: true,
|
||||
},
|
||||
{
|
||||
test: /\.module\.less$/i,
|
||||
use: getStyleLoaders(true, true),
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.(png|svg|jpg|jpeg|gif)$/i,
|
||||
|
|
@ -158,4 +240,5 @@ module.exports = {
|
|||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue