147 lines
3.4 KiB
TypeScript
147 lines
3.4 KiB
TypeScript
import path from "path";
|
|
import { Configuration as WebpackConfiguration } from "webpack";
|
|
import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
|
|
import Dotenv from "dotenv-webpack";
|
|
import HtmlWebpackPlugin from "html-webpack-plugin";
|
|
import CopyWebpackPlugin from "copy-webpack-plugin";
|
|
|
|
interface Configuration extends WebpackConfiguration {
|
|
devServer?: WebpackDevServerConfiguration;
|
|
}
|
|
|
|
const BUILD_ENV: string = process.env.BUILD_ENV || "LOCAL";
|
|
const LOCAL_PORT: string | number = process.env.LOCAL_PORT || 3000;
|
|
const SERVE_LOCAL: boolean =
|
|
process.env.WEBPACK_SERVE !== undefined &&
|
|
process.env.WEBPACK_SERVE.toUpperCase() === "TRUE";
|
|
|
|
/**
|
|
* Config for running local development server
|
|
*/
|
|
const getDevServerConfig = (): WebpackDevServerConfiguration => {
|
|
const devServerConfig: WebpackDevServerConfiguration = {
|
|
static: path.join(__dirname, "build"),
|
|
allowedHosts: ["all"],
|
|
compress: true,
|
|
port: LOCAL_PORT,
|
|
hot: true,
|
|
historyApiFallback: true,
|
|
};
|
|
|
|
console.log("Starting Development server with the following configuration:");
|
|
console.log(devServerConfig);
|
|
|
|
return devServerConfig;
|
|
};
|
|
|
|
console.info(`Building application for environment ${BUILD_ENV}`);
|
|
|
|
const baseConfig: Configuration = {
|
|
entry: {
|
|
app: path.join(__dirname, "src", "index.tsx"),
|
|
},
|
|
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.tsx?$/,
|
|
use: "ts-loader",
|
|
},
|
|
{
|
|
test: /\.css$/i,
|
|
use: ["style-loader", "css-loader"],
|
|
},
|
|
{
|
|
test: /\.m?js/,
|
|
resolve: {
|
|
fullySpecified: false,
|
|
},
|
|
},
|
|
{
|
|
test: /\.svg$/,
|
|
use: ["@svgr/webpack"],
|
|
},
|
|
{
|
|
test: /\.(png|jpe?g|gif|jp2|webp)$/,
|
|
loader: 'file-loader',
|
|
options: {
|
|
name: '[name].[ext]',
|
|
},
|
|
},
|
|
],
|
|
},
|
|
|
|
output: {
|
|
publicPath: "/",
|
|
filename: "[name].js",
|
|
path: path.join(__dirname, "build/"),
|
|
},
|
|
|
|
plugins: [
|
|
new HtmlWebpackPlugin({
|
|
template: path.join(__dirname, "src", "index.html"),
|
|
chunks: ["app"],
|
|
}),
|
|
new CopyWebpackPlugin({
|
|
patterns: [{ from: "public" }],
|
|
}),
|
|
],
|
|
|
|
resolve: {
|
|
extensions: [".tsx", ".ts", ".js", ".jsx"],
|
|
},
|
|
|
|
target: "web",
|
|
|
|
performance: {
|
|
maxEntrypointSize: 5242880,
|
|
maxAssetSize: 5242880
|
|
}
|
|
};
|
|
|
|
if (!baseConfig.plugins) throw new Error("No plugins array!");
|
|
|
|
switch (BUILD_ENV) {
|
|
case "LOCAL":
|
|
baseConfig.devtool = "source-map";
|
|
baseConfig.mode = "development";
|
|
baseConfig.plugins.push(
|
|
new Dotenv({
|
|
safe: true,
|
|
allowEmptyValues: false,
|
|
path: "./env/local.env", // load this now instead of the ones in '.env'
|
|
})
|
|
);
|
|
|
|
if (SERVE_LOCAL) baseConfig.devServer = getDevServerConfig();
|
|
|
|
break;
|
|
|
|
case "DEV":
|
|
baseConfig.devtool = "source-map";
|
|
baseConfig.mode = "development";
|
|
baseConfig.plugins.push(
|
|
new Dotenv({
|
|
path: "./env/development.env", // load this now instead of the ones in '.env'
|
|
})
|
|
);
|
|
|
|
if (SERVE_LOCAL) baseConfig.devServer = getDevServerConfig();
|
|
|
|
break;
|
|
|
|
case "PROD":
|
|
baseConfig.plugins.push(
|
|
new Dotenv({
|
|
path: "./env/production.env", // load this now instead of the ones in '.env'
|
|
})
|
|
);
|
|
|
|
baseConfig.mode = "production";
|
|
if (SERVE_LOCAL) baseConfig.devServer = getDevServerConfig();
|
|
|
|
break;
|
|
}
|
|
|
|
export default baseConfig;
|