Skip to content

Commit

Permalink
Update devServer in webpack.config.js (#584)
Browse files Browse the repository at this point in the history 
Co-authored-by: Sergey Myssak <sergey.myssak@gmail.com>
Signed-off-by: Andrey Myssak <andreymyssak@gmail.com>
  • Loading branch information
@andreymyssak @SergeyMyssak
andreymyssak and SergeyMyssak committed May 21, 2023
1 parent 525b766 commit 029a8dd
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 157 deletions.
5 changes: 2 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"*.scss"
],
"scripts": {
"start": "cross-env BABEL_MODULES=false webpack-dev-server --hot --config=src-docs/webpack.config.js",
"start": "cross-env BABEL_MODULES=false webpack serve --hot --config=src-docs/webpack.config.js",
"test-docker": "node ./scripts/test-docker.js",
"sync-docs": "node ./scripts/docs-sync.js",
"build-docs": "cross-env BABEL_MODULES=false cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 webpack --config=src-docs/webpack.config.js",
Expand All @@ -30,7 +30,7 @@
"test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
"test-a11y": "node ./scripts/a11y-testing",
"test-staged": "yarn lint && node scripts/test-staged.js",
"start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack-dev-server --config src-docs/webpack.config.js --port 9999",
"start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack serve --config src-docs/webpack.config.js --port 9999",
"yo-component": "yo ./generator-oui/app/component.js",
"start-test-server-and-a11y-test": "cross-env WAIT_ON_TIMEOUT=600000 start-server-and-test start-test-server http-get://localhost:9999 test-a11y",
"yo-doc": "yo ./generator-oui/app/documentation.js",
Expand Down Expand Up @@ -162,7 +162,6 @@
"cross-env": "^7.0.2",
"css-loader": "^4.2.2",
"cssnano": "^6.0.1",
"deasync": "^0.1.20",
"dedent": "^0.7.0",
"dts-generator": "^3.0.0",
"enzyme": "^3.11.0",
Expand Down
256 changes: 115 additions & 141 deletions src-docs/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,10 @@ const babelConfig = require('./.babelrc.js');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

const getPort = require('get-port');
const deasync = require('deasync');

const { NODE_ENV, CI, WEBPACK_DEV_SERVER } = process.env;
const { NODE_ENV, CI, WEBPACK_SERVE } = process.env;

const isDevelopment = WEBPACK_DEV_SERVER === 'true' && CI == null;
const isDevelopment = WEBPACK_SERVE === 'true' && CI == null;
const isProduction = NODE_ENV === 'production';
const isPuppeteer = NODE_ENV === 'puppeteer';

Expand All @@ -41,158 +40,133 @@ function employCache(loaders) {
return loaders;
}

const webpackConfig = {
mode: isProduction ? 'production' : 'development',
const webpackConfig = async () => {
const port = await getPort({
port: getPort.makeRange(8030, 8130),
host: '0.0.0.0',
});

devtool: isProduction ? 'source-map' : 'cheap-module-source-map',
return {
mode: isProduction ? 'production' : 'development',

entry: {
bundle: './index.js',
},
devtool: isProduction ? 'source-map' : 'cheap-module-source-map',

context: path.resolve(__dirname, 'src'),
entry: {
bundle: './index.js',
},

output: {
path: path.resolve(__dirname, '../docs'),
filename: `[name]${isProduction ? '.min' : ''}.js`,
},
context: path.resolve(__dirname, 'src'),

resolve: {
extensions: ['.ts', '.tsx', '.js', '.json'],
fallback: {
fs: false,
},
},

resolveLoader: {
alias: {
'prop-loader': path.resolve(
__dirname,
'../scripts/loaders/prop-loader.js'
),
output: {
path: path.resolve(__dirname, '../docs'),
filename: `[name]${isProduction ? '.min' : ''}.js`,
},
},

module: {
rules: [
{
resourceQuery: /raw/,
type: 'asset/source',
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json'],
fallback: {
fs: false,
},
{
test: /\.(js|tsx?)$/,
use: employCache([
{
loader: 'babel-loader',
options: { babelrc: false, ...babelConfig },
},
]),
exclude: [/node_modules/, /packages(\/|\\)react-datepicker/],
},
{
test: /\.scss$/,
use: employCache([
{
loader: 'style-loader',
options: { injectType: 'lazySingletonStyleTag' },
},
'css-loader',
'postcss-loader',
'sass-loader',
]),
exclude: /node_modules/,
},
{
test: /\.css$/,
use: employCache(['style-loader', 'css-loader']),
exclude: /node_modules/,
},
{
test: /\.(woff|woff2|ttf|eot|ico)(\?|$)/,
type: 'asset/resource',
},

resolveLoader: {
alias: {
'prop-loader': path.resolve(
__dirname,
'../scripts/loaders/prop-loader.js'
),
},
{
test: /\.(png|jp(e*)g|svg|gif)$/,
type: 'asset',
generator: {
filename: 'images/[contenthash]-[name].[ext]',
},

module: {
rules: [
{
resourceQuery: /raw/,
type: 'asset/source',
},
{
test: /\.(js|tsx?)$/,
use: employCache([
{
loader: 'babel-loader',
options: { babelrc: false, ...babelConfig },
},
]),
exclude: [/node_modules/, /packages(\/|\\)react-datepicker/],
},
{
test: /\.scss$/,
use: employCache([
{
loader: 'style-loader',
options: { injectType: 'lazySingletonStyleTag' },
},
'css-loader',
'postcss-loader',
'sass-loader',
]),
exclude: /node_modules/,
},
{
test: /\.css$/,
use: employCache(['style-loader', 'css-loader']),
exclude: /node_modules/,
},
parser: {
dataUrlCondition: {
maxSize: 8 * 1024,
{
test: /\.(woff|woff2|ttf|eot|ico)(\?|$)/,
type: 'asset/resource',
},
{
test: /\.(png|jp(e*)g|svg|gif)$/,
type: 'asset',
generator: {
filename: 'images/[contenthash]-[name].[ext]',
},
parser: {
dataUrlCondition: {
maxSize: 8 * 1024,
},
},
},
},
],
},

plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
inject: 'body',
cache: true,
showErrors: true,
}),

new CircularDependencyPlugin({
exclude: /node_modules/,
failOnError: true,
}),

new NodePolyfillPlugin(),
// run TypeScript during webpack build
// new ForkTsCheckerWebpackPlugin({
// typescript: { configFile: path.resolve(__dirname, '..', 'tsconfig.json') },
// async: false, // makes errors more visible, but potentially less performant
// }),
],
},

plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
inject: 'body',
cache: true,
showErrors: true,
}),

new CircularDependencyPlugin({
exclude: /node_modules/,
failOnError: true,
}),

new NodePolyfillPlugin(),
// run TypeScript during webpack build
// new ForkTsCheckerWebpackPlugin({
// typescript: { configFile: path.resolve(__dirname, '..', 'tsconfig.json') },
// async: false, // makes errors more visible, but potentially less performant
// }),
],

devServer: isDevelopment
? {
contentBase: 'src-docs/build',
host: '0.0.0.0',
allowedHosts: ['*'],
port: getPortSync({
port: getPort.makeRange(8030, 8130),

devServer: isDevelopment
? {
static: {
directory: path.resolve(__dirname, 'build'),
// prevent file watching while running on CI
// /app/ represents the entire docker environment
watch: isPuppeteer ? { ignored: '**/*' } : undefined,
},
host: '0.0.0.0',
}),
disableHostCheck: true,
historyApiFallback: true,
// prevent file watching while running on CI
// /app/ represents the entire docker environment
watchOptions: isPuppeteer
? {
ignored: '**/*',
}
: undefined,
}
: undefined,
port,
allowedHosts: 'all',
historyApiFallback: true,
}
: undefined,
};
};

// Inspired by `get-port-sync`, but propogates options
function getPortSync(options) {
let isDone = false;
let freeport = null;
let error = null;

getPort(options)
.then((port) => {
isDone = true;
freeport = port;
})
.catch((err) => {
isDone = true;
error = err;
});

// wait until we're done'
deasync.loopWhile(() => !isDone);

if (error) {
throw error;
} else {
return freeport;
}
}

module.exports = webpackConfig;
13 changes: 0 additions & 13 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5654,14 +5654,6 @@ dateformat@^4.5.0:
resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-4.6.3.tgz#556fa6497e5217fedb78821424f8a1c22fa3f4b5"
integrity sha512-2P0p0pFGzHS5EMnhdxQi7aJN+iMheud0UhG4dlE1DLAlvL8JHjJJTX/CSm4JXwV0Ka5nGk3zC5mcb5bUQUxxMA==

deasync@^0.1.20:
version "0.1.20"
resolved "https://registry.yarnpkg.com/deasync/-/deasync-0.1.20.tgz#546fd2660688a1eeed55edce2308c5cf7104f9da"
integrity sha512-E1GI7jMI57hL30OX6Ht/hfQU8DO4AuB9m72WFm4c38GNbUD4Q03//XZaOIHZiY+H1xUaomcot5yk2q/qIZQkGQ==
dependencies:
bindings "^1.5.0"
node-addon-api "^1.7.1"

debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
version "2.6.9"
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
Expand Down Expand Up @@ -11204,11 +11196,6 @@ node-abort-controller@^3.0.1:
resolved "https://registry.yarnpkg.com/node-abort-controller/-/node-abort-controller-3.1.1.tgz#a94377e964a9a37ac3976d848cb5c765833b8548"
integrity sha512-AGK2yQKIjRuqnc6VkX2Xj5d+QW8xZ87pa1UK6yA6ouUyuxfHuMP6umE5QK7UmTeOAymo+Zx1Fxiuw9rVx8taHQ==

node-addon-api@^1.7.1:
version "1.7.1"
resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-1.7.1.tgz#cf813cd69bb8d9100f6bdca6755fc268f54ac492"
integrity sha512-2+DuKodWvwRTrCfKOeR24KIc5unKjOh8mz17NCzVnHWfjAdDqbfbjqh7gUT+BkXBRQM52+xCHciKWonJ3CbJMQ==

node-emoji@^1.10.0:
version "1.10.0"
resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da"
Expand Down

0 comments on commit 029a8dd

Please sign in to comment.