tonyair/silverstripe-webpack
1
1
Fork 0
mirror of https://github.com/a2nt/silverstripe-webpack.git synced 2024-10-22 17:05:31 +02:00
Code Issues Projects Releases Wiki Activity

IMPR: Add ts-loader

Browse Source
This commit is contained in:
Tony Air 2021-09-12 22:50:08 +02:00
parent 007b37c1c9
commit e43e13479f
4 changed files with 192 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
package.json
View File

@ -35,7 +35,7 @@
"@a2nt/ss-bootstrap-ui-webpack-boilerplate-react": "^4.3.0", "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react": "^4.3.0",
"@angular/common": "^12.2.5", "@angular/common": "^12.2.5",
"@angular/core": "^12.2.5", "@angular/core": "^12.2.5",
"@apollo/client": "^3.4.10", "@apollo/client": "^3.4.11",
"@jsanahuja/instagramfeed": "github:jsanahuja/instagramfeed", "@jsanahuja/instagramfeed": "github:jsanahuja/instagramfeed",
"@popperjs/core": "^2.10.1", "@popperjs/core": "^2.10.1",
"aos": "^2.3.4", "aos": "^2.3.4",
@ -45,6 +45,7 @@
"bootbox": "^5.5.2", "bootbox": "^5.5.2",
"bootstrap": "^5.1.1", "bootstrap": "^5.1.1",
"brace-expansion": "^2.0.1", "brace-expansion": "^2.0.1",
"charming": "^3.0.2",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"graphql": "^15.5.3", "graphql": "^15.5.3",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",
@ -65,6 +66,7 @@
"rxjs": "^7.3.0", "rxjs": "^7.3.0",
"select2": "^4.0.13", "select2": "^4.0.13",
"setimmediate": "^1.0.5", "setimmediate": "^1.0.5",
"vanilla-calendar": "^1.0.30",
"youtube-embed": "^1.0.0" "youtube-embed": "^1.0.0"
}, },
"devDependencies": { "devDependencies": {
@ -72,12 +74,12 @@
"@babel/core": "^7.15.5", "@babel/core": "^7.15.5",
"@babel/eslint-parser": "^7.15.4", "@babel/eslint-parser": "^7.15.4",
"@babel/plugin-proposal-class-properties": "^7.14.5", "@babel/plugin-proposal-class-properties": "^7.14.5",
"@babel/plugin-proposal-object-rest-spread": "^7.14.7", "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
"@babel/plugin-syntax-jsx": "^7.14.5", "@babel/plugin-syntax-jsx": "^7.14.5",
"@babel/plugin-syntax-top-level-await": "^7.14.5", "@babel/plugin-syntax-top-level-await": "^7.14.5",
"@babel/plugin-transform-react-jsx": "^7.14.9", "@babel/plugin-transform-react-jsx": "^7.14.9",
"@babel/plugin-transform-runtime": "^7.15.0", "@babel/plugin-transform-runtime": "^7.15.0",
"@babel/preset-env": "^7.15.4", "@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5", "@babel/preset-react": "^7.14.5",
"@babel/runtime": "^7.15.4", "@babel/runtime": "^7.15.4",
"@googlemaps/markerclustererplus": "*", "@googlemaps/markerclustererplus": "*",
@ -89,7 +91,7 @@
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"ansi-html": "^0.0.7", "ansi-html": "^0.0.7",
"ansi-html-community": "^0.0.8", "ansi-html-community": "^0.0.8",
"ansi-regex": "^6.0.0", "ansi-regex": "^6.0.1",
"autoprefixer": "^10.3.4", "autoprefixer": "^10.3.4",
"babel-loader": "^8.2.2", "babel-loader": "^8.2.2",
"classnames": "^2.3.1", "classnames": "^2.3.1",
@ -121,7 +123,7 @@
"img-optimize-loader": "^1.0.7", "img-optimize-loader": "^1.0.7",
"js-yaml": "^4.1.0", "js-yaml": "^4.1.0",
"loglevel": "^1.7.1", "loglevel": "^1.7.1",
"mini-css-extract-plugin": "^2.2.2", "mini-css-extract-plugin": "^2.3.0",
"msw": "^0.35.0", "msw": "^0.35.0",
"node-fetch": "^3.0.0", "node-fetch": "^3.0.0",
"object-assign": "^4.1.1", "object-assign": "^4.1.1",
@ -146,20 +148,22 @@
"sass-loader": "^12.1.0", "sass-loader": "^12.1.0",
"scheduler": "^0.20.2", "scheduler": "^0.20.2",
"shallowequal": "^1.1.0", "shallowequal": "^1.1.0",
"strip-ansi": "^7.0.0", "strip-ansi": "^7.0.1",
"style-loader": "^3.2.1", "style-loader": "^3.2.1",
"sucrase": "^3.20.1", "sucrase": "^3.20.1",
"svg-url-loader": "^7.1.1", "svg-url-loader": "^7.1.1",
"symbol-observable": "^4.0.0", "symbol-observable": "^4.0.0",
"terser-webpack-plugin": "^5.2.3", "terser-webpack-plugin": "^5.2.4",
"ts-invariant": "^0.9.1", "ts-invariant": "^0.9.3",
"ts-loader": "^9.2.5",
"tslib": "^2.3.1", "tslib": "^2.3.1",
"typescript": "^4.4.3",
"url": "^0.11.0", "url": "^0.11.0",
"url-loader": "^4.1.1", "url-loader": "^4.1.1",
"webpack": "^5.52.0", "webpack": "^5.52.1",
"webpack-bundle-analyzer": "^4.4.2", "webpack-bundle-analyzer": "^4.4.2",
"webpack-cli": "^4.8.0", "webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.1.1", "webpack-dev-server": "^4.2.0",
"webpack-manifest-plugin": "^4.0.2", "webpack-manifest-plugin": "^4.0.2",
"webpack-merge": "^5.8.0", "webpack-merge": "^5.8.0",
"yarn": "^1.22.11", "yarn": "^1.22.11",

5
tsconfig.json Normal file
View File

@ -0,0 +1,5 @@
{
"compilerOptions": {
"sourceMap": true
}
}

270
webpack.config.js
View File

@ -6,10 +6,9 @@ const conf = common.configuration;
const webpack = require('webpack'); const webpack = require('webpack');
const { const {
merge merge,
} = require('webpack-merge'); } = require('webpack-merge');
const fs = require('fs'); const fs = require('fs');
const path = require('path'); const path = require('path');
@ -43,11 +42,11 @@ let plugins = [
'react-dom': 'ReactDOM', 'react-dom': 'ReactDOM',
/*$: 'jquery', /*$: 'jquery',
jQuery: 'jquery',*/ jQuery: 'jquery',*/
}), }),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': { 'process.env': {
NODE_ENV: JSON.stringify(NODE_ENV), NODE_ENV: JSON.stringify(NODE_ENV),
}, },
UINAME: JSON.stringify(UIInfo.name), UINAME: JSON.stringify(UIInfo.name),
UIVERSION: UIVERSION, UIVERSION: UIVERSION,
UIAUTHOR: JSON.stringify(UIInfo.author), UIAUTHOR: JSON.stringify(UIInfo.author),
@ -56,119 +55,119 @@ let plugins = [
GRAPHQL_API_KEY: JSON.stringify(conf['GRAPHQL_API_KEY']), GRAPHQL_API_KEY: JSON.stringify(conf['GRAPHQL_API_KEY']),
SWVERSION: JSON.stringify(`sw-${new Date().getTime()}`), SWVERSION: JSON.stringify(`sw-${new Date().getTime()}`),
BASE_HREF: JSON.stringify(''), BASE_HREF: JSON.stringify(''),
}), }),
new webpack.LoaderOptionsPlugin({ new webpack.LoaderOptionsPlugin({
minimize: COMPRESS, minimize: COMPRESS,
debug: !COMPRESS, debug: !COMPRESS,
}), }),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: 'css/[name].css', filename: 'css/[name].css',
//allChunks: true, //allChunks: true,
}), }),
]; ];
if (COMPRESS) { if (COMPRESS) {
plugins.push(require('autoprefixer')); plugins.push(require('autoprefixer'));
/*plugins.push( /*plugins.push(
new ImageSpritePlugin({ new ImageSpritePlugin({
exclude: /exclude|original|default-|icons|sprite|svg|logo|favicon/, exclude: /exclude|original|default-|icons|sprite|svg|logo|favicon/,
commentOrigin: false, commentOrigin: false,
compress: COMPRESS, compress: COMPRESS,
extensions: ['png'], extensions: ['png'],
indent: '', indent: '',
log: true, log: true,
//outputPath: path.join(__dirname, conf.APPDIR, conf.DIST), //outputPath: path.join(__dirname, conf.APPDIR, conf.DIST),
outputFilename: 'img/sprite-[hash].png', outputFilename: 'img/sprite-[hash].png',
padding: 0, padding: 0,
}), }),
);*/ );*/
} }
const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html'); const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html');
if (fs.existsSync(indexPath)) { if (fs.existsSync(indexPath)) {
plugins.push( plugins.push(
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
publicPath: '', publicPath: '',
template: path.join(conf.APPDIR, conf.SRC, 'index.html'), template: path.join(conf.APPDIR, conf.SRC, 'index.html'),
templateParameters: { templateParameters: {
NODE_ENV: NODE_ENV, NODE_ENV: NODE_ENV,
GRAPHQL_URL: conf['GRAPHQL_URL'], GRAPHQL_URL: conf['GRAPHQL_URL'],
STATIC_URL: conf['STATIC_URL'], STATIC_URL: conf['STATIC_URL'],
REACT_SCRIPTS: NODE_ENV === 'production' ? REACT_SCRIPTS: NODE_ENV === 'production' ?
'<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>' : '<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>', '<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>' : '<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>',
}, },
xhtml: true, xhtml: true,
}), }),
); );
} }
const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png'); const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png');
if (fs.existsSync(faviconPath)) { if (fs.existsSync(faviconPath)) {
plugins.push( plugins.push(
new FaviconsWebpackPlugin({ new FaviconsWebpackPlugin({
title: 'Webpack App', title: 'Webpack App',
logo: faviconPath, logo: faviconPath,
prefix: '/icons/', prefix: '/icons/',
emitStats: false, emitStats: false,
persistentCache: true, persistentCache: true,
inject: false, inject: false,
statsFilename: path.join( statsFilename: path.join(
conf.APPDIR, conf.APPDIR,
conf.DIST, conf.DIST,
'icons', 'icons',
'iconstats.json', 'iconstats.json',
), ),
icons: { icons: {
android: true, android: true,
appleIcon: true, appleIcon: true,
appleStartup: true, appleStartup: true,
coast: true, coast: true,
favicons: true, favicons: true,
firefox: true, firefox: true,
opengraph: true, opengraph: true,
twitter: true, twitter: true,
yandex: true, yandex: true,
windows: true, windows: true,
}, },
}), }),
); );
} }
// add themes favicons // add themes favicons
common.themes.forEach((theme) => { common.themes.forEach((theme) => {
const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png'); const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
if (fs.existsSync(faviconPath)) { if (fs.existsSync(faviconPath)) {
plugins.push( plugins.push(
new FaviconsWebpackPlugin({ new FaviconsWebpackPlugin({
title: 'Webpack App', title: 'Webpack App',
logo: faviconPath, logo: faviconPath,
prefix: '/' + theme + '-icons/', prefix: '/' + theme + '-icons/',
emitStats: false, emitStats: false,
persistentCache: true, persistentCache: true,
inject: false, inject: false,
statsFilename: path.join( statsFilename: path.join(
conf.APPDIR, conf.APPDIR,
conf.DIST, conf.DIST,
theme + '-icons', theme + '-icons',
'iconstats.json', 'iconstats.json',
), ),
icons: { icons: {
android: true, android: true,
appleIcon: true, appleIcon: true,
appleStartup: true, appleStartup: true,
coast: true, coast: true,
favicons: true, favicons: true,
firefox: true, firefox: true,
opengraph: true, opengraph: true,
twitter: true, twitter: true,
yandex: true, yandex: true,
windows: true, windows: true,
}, },
}), }),
); );
} }
}); });
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin; .BundleAnalyzerPlugin;
@ -176,14 +175,14 @@ plugins.push(
new BundleAnalyzerPlugin({ new BundleAnalyzerPlugin({
analyzerMode: 'static', analyzerMode: 'static',
openAnalyzer: false, openAnalyzer: false,
}), }),
); );
const cfg = merge(common.webpack, { const cfg = merge(common.webpack, {
mode: NODE_ENV, mode: NODE_ENV,
cache: { cache: {
type: 'filesystem', type: 'filesystem',
}, },
recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'), recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'),
optimization: { optimization: {
//removeAvailableModules: false, //removeAvailableModules: false,
@ -191,7 +190,7 @@ const cfg = merge(common.webpack, {
splitChunks: { splitChunks: {
name: 'vendor', name: 'vendor',
minChunks: 2, minChunks: 2,
}, },
concatenateModules: true, //ModuleConcatenationPlugin concatenateModules: true, //ModuleConcatenationPlugin
minimizer: [ minimizer: [
new TerserPlugin({ new TerserPlugin({
@ -204,7 +203,7 @@ const cfg = merge(common.webpack, {
// sections only apply transformations that are ecma 5 safe // sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234 // https://github.com/facebook/create-react-app/pull/4234
ecma: 8, ecma: 8,
}, },
compress: { compress: {
ecma: 6, ecma: 6,
warnings: false, warnings: false,
@ -213,7 +212,7 @@ const cfg = merge(common.webpack, {
// Pending further investigation: // Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011 // https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false, comparisons: false,
}, },
keep_fnames: true, keep_fnames: true,
keep_classnames: true, keep_classnames: true,
@ -222,19 +221,19 @@ const cfg = merge(common.webpack, {
keep_fnames: true, keep_fnames: true,
keep_classnames: true, keep_classnames: true,
reserved: ['$', 'jQuery', 'jquery'], reserved: ['$', 'jQuery', 'jquery'],
}, },
output: { output: {
ecma: 5, ecma: 5,
comments: false, comments: false,
// Turned on because emoji and regex is not minified properly using default // Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488 // https://github.com/facebook/create-react-app/issues/2488
ascii_only: true, ascii_only: true,
}, },
}, },
// Use multi-process parallel running to improve the build speed // Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1 // Default number of concurrent runs: os.cpus().length - 1
parallel: true, parallel: true,
}), }),
new CssMinimizerPlugin({ new CssMinimizerPlugin({
parallel: true, parallel: true,
minimizerOptions: [{ minimizerOptions: [{
@ -242,8 +241,8 @@ const cfg = merge(common.webpack, {
'default', 'default',
{ {
discardComments: { discardComments: {
removeAll: true removeAll: true,
}, },
zindex: true, zindex: true,
cssDeclarationSorter: true, cssDeclarationSorter: true,
reduceIdents: false, reduceIdents: false,
@ -253,25 +252,26 @@ const cfg = merge(common.webpack, {
discardUnused: true, discardUnused: true,
discardOverridden: true, discardOverridden: true,
discardDuplicates: true, discardDuplicates: true,
}, },
], ],
}, ], },],
minify: [ minify: [
CssMinimizerPlugin.cssnanoMinify, CssMinimizerPlugin.cssnanoMinify,
//CssMinimizerPlugin.cleanCssMinify, //CssMinimizerPlugin.cleanCssMinify,
] ],
}), }),
], ],
}, },
output: { output: {
publicPath: path.join(conf.APPDIR, conf.DIST) + '/', publicPath: path.join(conf.APPDIR, conf.DIST) + '/',
path: path.join(__dirname, conf.APPDIR, conf.DIST) + '/', path: path.join(__dirname, conf.APPDIR, conf.DIST) + '/',
filename: path.join('js', '[name].js'), filename: path.join('js', '[name].js'),
}, },
module: { module: {
rules: [{ rules: [
{ test: /\.tsx?$/, loader: 'ts-loader' }, {
test: /\.jsx?$/, test: /\.jsx?$/,
//exclude: /node_modules/, //exclude: /node_modules/,
use: { use: {
@ -285,51 +285,51 @@ const cfg = merge(common.webpack, {
plugins: [ plugins: [
'@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-class-properties',
], ],
}, },
], //Preset used for env setup ], //Preset used for env setup
plugins: [ plugins: [
['@babel/transform-react-jsx'] ['@babel/transform-react-jsx'],
], ],
cacheDirectory: true, cacheDirectory: true,
cacheCompression: true, cacheCompression: true,
}, },
}, },
}, },
{ {
test: /\.s?css$/, test: /\.s?css$/,
use: [{ use: [{
loader: MiniCssExtractPlugin.loader, loader: MiniCssExtractPlugin.loader,
options: { options: {
publicPath: "../", publicPath: '../',
}, },
}, },
{ {
loader: 'css-loader', loader: 'css-loader',
options: { options: {
sourceMap: true sourceMap: true,
}, },
}, },
/*{ /*{
loader: 'resolve-url-loader', loader: 'resolve-url-loader',
},*/ },*/
{ {
loader: 'sass-loader', loader: 'sass-loader',
options: { options: {
sourceMap: true sourceMap: true,
}, },
}, },
], ],
}, },
{ {
test: /fontawesome([^.]+).(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/, test: /fontawesome([^.]+).(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
type: "asset/resource", type: 'asset/resource',
}, },
{ {
test: /\.(ttf|otf|eot|woff(2)?)$/, test: /\.(ttf|otf|eot|woff(2)?)$/,
type: "asset/resource", type: 'asset/resource',
}, { }, {
test: /\.(png|webp|jpg|jpeg|gif|svg)$/, test: /\.(png|webp|jpg|jpeg|gif|svg)$/,
type: "javascript/auto", type: 'javascript/auto',
use: [ use: [
{ {
loader: 'img-optimize-loader', loader: 'img-optimize-loader',
@ -345,33 +345,33 @@ const cfg = merge(common.webpack, {
// loseless compression for png // loseless compression for png
optipng: { optipng: {
optimizationLevel: 4, optimizationLevel: 4,
}, },
// lossy compression for png. This will generate smaller file than optipng. // lossy compression for png. This will generate smaller file than optipng.
pngquant: { pngquant: {
quality: [0.2, 0.8], quality: [0.2, 0.8],
}, },
// Compression for svg. // Compression for svg.
svgo: true, svgo: true,
// Compression for gif. // Compression for gif.
gifsicle: { gifsicle: {
optimizationLevel: 3, optimizationLevel: 3,
}, },
// Compression for jpg. // Compression for jpg.
mozjpeg: { mozjpeg: {
progressive: true, progressive: true,
quality: 60, quality: 60,
}, },
}, },
inline: { inline: {
limit: 1, limit: 1,
}, },
}, },
}, ], },],
}, ], },],
}, },
plugins: plugins, plugins: plugins,
}); });
console.log(cfg); console.log(cfg);
module.exports = cfg; module.exports = cfg;

75
webpack.config.serve.js
View File

@ -10,7 +10,7 @@ const fs = require('fs');
//const autoprefixer = require('autoprefixer'); //const autoprefixer = require('autoprefixer');
const webpack = require('webpack'); const webpack = require('webpack');
const { const {
merge merge,
} = require('webpack-merge'); } = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@ -38,7 +38,7 @@ const plugins = [
'react-dom': 'ReactDOM', 'react-dom': 'ReactDOM',
/*$: 'jquery', /*$: 'jquery',
jQuery: 'jquery',*/ jQuery: 'jquery',*/
}), }),
new webpack.DefinePlugin({ new webpack.DefinePlugin({
UINAME: JSON.stringify(UIInfo.name), UINAME: JSON.stringify(UIInfo.name),
UIVERSION: UIVERSION, UIVERSION: UIVERSION,
@ -50,37 +50,37 @@ const plugins = [
BASE_HREF: JSON.stringify( BASE_HREF: JSON.stringify(
`http${conf['HTTPS'] ? 's' : ''}://${IP}:${PORT}`, `http${conf['HTTPS'] ? 's' : ''}://${IP}:${PORT}`,
), ),
}), }),
//new webpack.HotModuleReplacementPlugin(), //new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin(), new MiniCssExtractPlugin(),
]; ];
const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html'); const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html');
if (fs.existsSync(indexPath)) { if (fs.existsSync(indexPath)) {
plugins.push( plugins.push(
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
publicPath: '', publicPath: '',
template: path.join(conf.APPDIR, conf.SRC, 'index.html'), template: path.join(conf.APPDIR, conf.SRC, 'index.html'),
templateParameters: { templateParameters: {
NODE_ENV: NODE_ENV, NODE_ENV: NODE_ENV,
GRAPHQL_URL: conf['GRAPHQL_URL'], GRAPHQL_URL: conf['GRAPHQL_URL'],
STATIC_URL: conf['STATIC_URL'], STATIC_URL: conf['STATIC_URL'],
REACT_SCRIPTS: NODE_ENV === 'production' ? REACT_SCRIPTS: NODE_ENV === 'production' ?
'<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>' : '<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>', '<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>' : '<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>',
}, },
}), }),
); );
} }
const config = merge(common.webpack, { const config = merge(common.webpack, {
mode: 'development', mode: 'development',
entry: { entry: {
/*hot: [ /*hot: [
'react-hot-loader/patch', 'react-hot-loader/patch',
'webpack-dev-server/?https://' + conf.HOSTNAME + ':' + conf.PORT, 'webpack-dev-server/?https://' + conf.HOSTNAME + ':' + conf.PORT,
'webpack/hot/only-dev-server', 'webpack/hot/only-dev-server',
],*/ ],*/
}, },
output: { output: {
@ -90,16 +90,17 @@ const config = merge(common.webpack, {
publicPath: `http${conf['HTTPS'] ? 's' : ''}://${conf['HOSTNAME']}:${ publicPath: `http${conf['HTTPS'] ? 's' : ''}://${conf['HOSTNAME']}:${
conf.PORT conf.PORT
}/`, }/`,
}, },
module: { module: {
rules: [{ rules: [
{ test: /\.tsx?$/, loader: 'ts-loader' }, {
test: /\.jsx?$/, test: /\.jsx?$/,
//exclude: /node_modules/, //exclude: /node_modules/,
use: { use: {
loader: '@sucrase/webpack-loader', //'babel-loader', loader: '@sucrase/webpack-loader', //'babel-loader',
options: { options: {
transforms: ['jsx'] transforms: ['jsx'],
/*presets: [ /*presets: [
'@babel/preset-env', '@babel/preset-env',
'@babel/react', '@babel/react',
@ -116,36 +117,36 @@ const config = merge(common.webpack, {
], ],
cacheDirectory: true, cacheDirectory: true,
cacheCompression: true,*/ cacheCompression: true,*/
}, },
}, },
}, },
{ {
test: /\.s?css$/, test: /\.s?css$/,
use: [{ use: [{
loader: 'style-loader', //MiniCssExtractPlugin.loader, loader: 'style-loader', //MiniCssExtractPlugin.loader,
}, },
{ {
loader: 'css-loader', loader: 'css-loader',
options: { options: {
sourceMap: true, sourceMap: true,
}, },
}, },
{ {
loader: 'sass-loader', loader: 'sass-loader',
options: { options: {
sourceMap: true, sourceMap: true,
}, },
}, ], },],
}, },
{ {
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
type: 'asset/resource', type: 'asset/resource',
}, },
{ {
test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|webp|woff(2)?)$/, test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|webp|woff(2)?)$/,
type: 'asset/resource', type: 'asset/resource',
}, ], },],
}, },
plugins: plugins, plugins: plugins,
devServer: { devServer: {
@ -161,8 +162,8 @@ const config = merge(common.webpack, {
'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Origin': '*',
'Referrer-Policy': 'unsafe-url', 'Referrer-Policy': 'unsafe-url',
'service-worker-allowed': '/', 'service-worker-allowed': '/',
}, },
}, },
}); });
module.exports = config; module.exports = config;