07d346b516
SwaggerUI is now built using `webpack@5`, with dev support for `webpack-dev-server@4` - ES Module output bundle path now points to `swagger-ui-es-bundle-core`, which does not include dependencies - No change to CommonJS output bundle or path - Now uses Asset Modules, which replaces `file-loader`, `raw-loader`, and `url-loader` - Removed unused rules/loaders for `.woff | .woff2 | .ttf | .eot` fonts and html - Node polyfills are no longer bundled with `webpack@5`, and must be loaded separately and/or use `resolve.fallback`. As an example, SwaggerUI loads `process`, `buffer`, and `stream-browserify` as `devDependencies` in order to build development and production bundles. SwaggerUI-React - Now imports `swagger-ui-es-bundle-core`, and similarly outputs `swagger-ui-es-bundle-core` to its `dist` directory Dev notes: - Order of execution matters for the production npm build scripts. `build-stylesheets` needs to get built first, then cleanup of any empty artifacts, before building the various production bundles - `Dev-helpers` now relies on `HTMLWebpackPlugin` to inject css and bundle files
122 lines
2.9 KiB
JavaScript
122 lines
2.9 KiB
JavaScript
/**
|
|
* @prettier
|
|
*/
|
|
|
|
import path from "path"
|
|
import ReactRefreshWebpackPlugin from "@pmmmwh/react-refresh-webpack-plugin"
|
|
import HtmlWebpackPlugin from "html-webpack-plugin"
|
|
import { HtmlWebpackSkipAssetsPlugin } from "html-webpack-skip-assets-plugin"
|
|
|
|
import configBuilder from "./_config-builder"
|
|
import styleConfig from "./stylesheets.babel"
|
|
|
|
const projectBasePath = path.join(__dirname, "../")
|
|
const isDevelopment = process.env.NODE_ENV !== "production"
|
|
|
|
const devConfig = configBuilder(
|
|
{
|
|
minimize: false,
|
|
mangle: false,
|
|
sourcemaps: true,
|
|
includeDependencies: true,
|
|
},
|
|
{
|
|
mode: "development",
|
|
entry: {
|
|
"swagger-ui-bundle": [
|
|
"./src/core/index.js",
|
|
],
|
|
"swagger-ui-standalone-preset": [
|
|
"./src/standalone/index.js",
|
|
],
|
|
"swagger-ui": "./src/style/main.scss",
|
|
vendors: ["react-refresh/runtime"],
|
|
},
|
|
|
|
performance: {
|
|
hints: false
|
|
},
|
|
|
|
output: {
|
|
filename: "[name].js",
|
|
chunkFilename: "[id].js",
|
|
library: {
|
|
name: "[name]",
|
|
export: "default",
|
|
},
|
|
publicPath: "/",
|
|
},
|
|
|
|
devServer: {
|
|
allowedHosts: "all", // for development within VMs
|
|
headers: {
|
|
"Access-Control-Allow-Origin": "*",
|
|
"Access-Control-Allow-Methods": "*",
|
|
"Access-Control-Allow-Headers": "*",
|
|
},
|
|
port: 3200,
|
|
host: "0.0.0.0",
|
|
hot: true,
|
|
static: {
|
|
directory: path.resolve(projectBasePath, "dev-helpers"),
|
|
publicPath: "/",
|
|
},
|
|
client: {
|
|
logging: "info",
|
|
progress: true,
|
|
},
|
|
},
|
|
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.jsx?$/,
|
|
include: [
|
|
path.join(projectBasePath, "src"),
|
|
path.join(projectBasePath, "node_modules", "object-assign-deep"),
|
|
],
|
|
loader: "babel-loader",
|
|
options: {
|
|
retainLines: true,
|
|
cacheDirectory: true,
|
|
plugins: [isDevelopment && require.resolve("react-refresh/babel")].filter(Boolean),
|
|
},
|
|
},
|
|
{
|
|
test: /\.(txt|yaml)$/,
|
|
type: "asset/source",
|
|
},
|
|
{
|
|
test: /\.(png|jpg|jpeg|gif|svg)$/,
|
|
type: "asset/inline",
|
|
},
|
|
],
|
|
},
|
|
|
|
plugins: [
|
|
isDevelopment && new ReactRefreshWebpackPlugin({ library: "[name]" }),
|
|
new HtmlWebpackPlugin({
|
|
template: path.join(projectBasePath, "dev-helpers", "index.html"),
|
|
}),
|
|
new HtmlWebpackSkipAssetsPlugin({
|
|
skipAssets: [/swagger-ui\.js/],
|
|
}),
|
|
].filter(Boolean),
|
|
|
|
optimization: {
|
|
runtimeChunk: "single", // for multiple entry points using ReactRefreshWebpackPlugin
|
|
},
|
|
},
|
|
)
|
|
|
|
// mix in the style config's plugins and loader rules
|
|
|
|
devConfig.plugins = [...devConfig.plugins, ...styleConfig.plugins]
|
|
|
|
devConfig.module.rules = [
|
|
...devConfig.module.rules,
|
|
...styleConfig.module.rules,
|
|
]
|
|
|
|
export default devConfig
|