mirror of
https://github.com/a2nt/silverstripe-webpack.git
synced 2024-10-22 17:05:31 +02:00
IMPR: Minor updates
This commit is contained in:
Tony Air
parent
ca025220a7
commit
88cec555d3
@ -5,6 +5,7 @@ import '../scss/app.scss';
|
||||
|
||||
import MainUI from '@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/js/_components/_main';
|
||||
import '@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/js/_ui/_ui.instagram.feed';
|
||||
import '@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/js/_ui/_ui.carousel';
|
||||
|
||||
import './_layout';
|
||||
|
||||
@ -30,5 +31,5 @@ const images = importAll(
|
||||
require.context('../img/', false, /\.(png|jpe?g|svg)$/),
|
||||
);
|
||||
const fontAwesome = importAll(
|
||||
require.context('font-awesome', false, /\.(otf|eot|svg|ttf|woff|woff2)$/),
|
||||
require.context('font-awesome', false, /\.(otf|eot|ttf|woff|woff2)$/),
|
||||
);
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
@import '~@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/scss/_variables';
|
||||
$white: #fff;
|
||||
$black: #000;
|
||||
|
||||
$body-bg: #fff;
|
||||
$body-color: #212529;
|
||||
@ -29,8 +30,7 @@ $body-main-nav-link-hover-color: $body-color;
|
||||
$body-main-nav-dropdown-hover-bg: $body-color;
|
||||
$body-footer-footer-bg: $body-bg;
|
||||
|
||||
$font-family-base: 'Roboto',
|
||||
$font-family-sans-serif;
|
||||
$font-family-base: 'Roboto';
|
||||
//
|
||||
|
||||
$full-body-min-width: map-get($grid-breakpoints, 'lg');
|
||||
@ -72,3 +72,7 @@ $carousel-controls-zindex: 11;
|
||||
$carousel-controls-shadow: 1px 1px $black;
|
||||
$carousel-controls-hover-bg: transparentize($black, 0.4);
|
||||
$carousel-slide-img-loading-max-height: 70vh;
|
||||
|
||||
@import '~@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/scss/_variables';
|
||||
$font-family-base: 'Roboto',
|
||||
$font-family-sans-serif;
|
||||
|
||||
@ -41,36 +41,38 @@ class EmbeddedObjectExtension extends DataExtension
|
||||
$url,
|
||||
$matches
|
||||
);
|
||||
$videoID = $matches[1];
|
||||
if (isset($matches[1])) {
|
||||
$videoID = $matches[1];
|
||||
|
||||
$params = array_merge($params, [
|
||||
'feature=oembed',
|
||||
'wmode=transparent',
|
||||
'enablejsapi=1',
|
||||
'disablekb=1',
|
||||
'iv_load_policy=3',
|
||||
'modestbranding=1',
|
||||
'rel=0',
|
||||
'showinfo=0',
|
||||
//'controls='.($this->owner->getField('Controls') ? '1': '0')
|
||||
]);
|
||||
$params = array_merge($params, [
|
||||
'feature=oembed',
|
||||
'wmode=transparent',
|
||||
'enablejsapi=1',
|
||||
'disablekb=1',
|
||||
'iv_load_policy=3',
|
||||
'modestbranding=1',
|
||||
'rel=0',
|
||||
'showinfo=0',
|
||||
//'controls='.($this->owner->getField('Controls') ? '1': '0')
|
||||
]);
|
||||
|
||||
if ($this->owner->getField('Autoplay')) {
|
||||
$params[] = 'autoplay=1';
|
||||
$params[] = 'mute=1';
|
||||
if ($this->owner->getField('Autoplay')) {
|
||||
$params[] = 'autoplay=1';
|
||||
$params[] = 'mute=1';
|
||||
}
|
||||
|
||||
if ($this->owner->getField('Loop')) {
|
||||
$params[] = 'loop=1';
|
||||
$params[] = 'playlist=' . $videoID;
|
||||
}
|
||||
|
||||
$this->owner->EmbedHTML = preg_replace(
|
||||
'/src="([A-z0-9:\/\.]+)\??(.*?)"/',
|
||||
'src="https://www.youtube.com/embed/' . $videoID . '?' . implode('&', $params) . '" '
|
||||
. implode(' ', $iframe_params),
|
||||
$this->owner->EmbedHTML
|
||||
);
|
||||
}
|
||||
|
||||
if ($this->owner->getField('Loop')) {
|
||||
$params[] = 'loop=1';
|
||||
$params[] = 'playlist='.$videoID;
|
||||
}
|
||||
|
||||
$this->owner->EmbedHTML = preg_replace(
|
||||
'/src="([A-z0-9:\/\.]+)\??(.*?)"/',
|
||||
'src="https://www.youtube.com/embed/'.$videoID.'?' . implode('&', $params) . '" '
|
||||
.implode(' ', $iframe_params),
|
||||
$this->owner->EmbedHTML
|
||||
);
|
||||
}
|
||||
|
||||
if (stripos($this->owner->EmbedHTML, 'https://player.vimeo.com/video/') > 0) {
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
|
||||
<% include Objects\SocialLinks %>
|
||||
<% end_with %>
|
||||
|
||||
|
||||
<% include LocaleMenu %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<% else %>
|
||||
<% if $Image || $ImageURL %>
|
||||
<span class="img">
|
||||
<img class="carosel__img"
|
||||
<img class="carousel__img"
|
||||
src="{$EmptyImgSrc}"
|
||||
data-lazy-src="<% if $ImageURL %>$ImageURL<% else %>$Image.FocusFill($SlideWidth,$SlideHeight).URL<% end_if %>"
|
||||
alt="<% if $Headline %>$Headline.XML<% end_if %>"
|
||||
|
||||
@ -35,366 +35,358 @@ console.log('WebP images: ' + conf['webp']);
|
||||
console.log('GRAPHQL_API_KEY: ' + conf['GRAPHQL_API_KEY']);
|
||||
|
||||
let plugins = [
|
||||
new webpack.ProvidePlugin({
|
||||
react: 'React',
|
||||
'react-dom': 'ReactDOM',
|
||||
/*$: 'jquery',
|
||||
jQuery: 'jquery',
|
||||
Popper: ['popper.js', 'default'],
|
||||
Util: 'exports-loader?Util!bootstrap/js/dist/util',
|
||||
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
|
||||
Button: 'exports-loader?Button!bootstrap/js/dist/button',
|
||||
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
|
||||
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
|
||||
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
|
||||
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
|
||||
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
|
||||
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
|
||||
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
|
||||
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',*/
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: JSON.stringify(NODE_ENV),
|
||||
},
|
||||
UINAME: JSON.stringify(UIInfo.name),
|
||||
UIVERSION: UIVERSION,
|
||||
UIAUTHOR: JSON.stringify(UIInfo.author),
|
||||
UIMetaNAME: JSON.stringify(UIMetaInfo.name),
|
||||
UIMetaVersion: JSON.stringify(UIMetaInfo.version),
|
||||
GRAPHQL_API_KEY: JSON.stringify(conf['GRAPHQL_API_KEY']),
|
||||
SWVERSION: JSON.stringify(`sw-${new Date().getTime()}`),
|
||||
BASE_HREF: JSON.stringify(`http://${IP}:${PORT}`),
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: COMPRESS,
|
||||
debug: !COMPRESS,
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: 'css/[name].css',
|
||||
//allChunks: true,
|
||||
}),
|
||||
new webpack.ProvidePlugin({
|
||||
react: 'React',
|
||||
'react-dom': 'ReactDOM',
|
||||
/*$: 'jquery',
|
||||
jQuery: 'jquery',
|
||||
Popper: ['popper.js', 'default'],
|
||||
Util: 'exports-loader?Util!bootstrap/js/dist/util',
|
||||
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
|
||||
Button: 'exports-loader?Button!bootstrap/js/dist/button',
|
||||
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
|
||||
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
|
||||
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
|
||||
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
|
||||
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
|
||||
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
|
||||
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
|
||||
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',*/
|
||||
}),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: JSON.stringify(NODE_ENV),
|
||||
},
|
||||
UINAME: JSON.stringify(UIInfo.name),
|
||||
UIVERSION: UIVERSION,
|
||||
UIAUTHOR: JSON.stringify(UIInfo.author),
|
||||
UIMetaNAME: JSON.stringify(UIMetaInfo.name),
|
||||
UIMetaVersion: JSON.stringify(UIMetaInfo.version),
|
||||
GRAPHQL_API_KEY: JSON.stringify(conf['GRAPHQL_API_KEY']),
|
||||
SWVERSION: JSON.stringify(`sw-${new Date().getTime()}`),
|
||||
BASE_HREF: JSON.stringify(`http://${IP}:${PORT}`),
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: COMPRESS,
|
||||
debug: !COMPRESS,
|
||||
}),
|
||||
new MiniCssExtractPlugin({
|
||||
filename: 'css/[name].css',
|
||||
//allChunks: true,
|
||||
}),
|
||||
];
|
||||
|
||||
if (COMPRESS) {
|
||||
plugins.push(
|
||||
new OptimizeCssAssetsPlugin({
|
||||
//assetNameRegExp: /\.optimize\.css$/g,
|
||||
cssProcessor: require('cssnano'),
|
||||
cssProcessorPluginOptions: {
|
||||
preset: ['default'],
|
||||
},
|
||||
cssProcessorOptions: {
|
||||
zindex: true,
|
||||
cssDeclarationSorter: true,
|
||||
reduceIdents: false,
|
||||
mergeIdents: true,
|
||||
mergeRules: true,
|
||||
mergeLonghand: true,
|
||||
discardUnused: true,
|
||||
discardOverridden: true,
|
||||
discardDuplicates: true,
|
||||
discardComments: {
|
||||
removeAll: true,
|
||||
},
|
||||
},
|
||||
canPrint: true,
|
||||
}),
|
||||
);
|
||||
plugins.push(require('autoprefixer'));
|
||||
plugins.push(
|
||||
new OptimizeCssAssetsPlugin({
|
||||
//assetNameRegExp: /\.optimize\.css$/g,
|
||||
cssProcessor: require('cssnano'),
|
||||
cssProcessorPluginOptions: {
|
||||
preset: ['default'],
|
||||
},
|
||||
cssProcessorOptions: {
|
||||
zindex: true,
|
||||
cssDeclarationSorter: true,
|
||||
reduceIdents: false,
|
||||
mergeIdents: true,
|
||||
mergeRules: true,
|
||||
mergeLonghand: true,
|
||||
discardUnused: true,
|
||||
discardOverridden: true,
|
||||
discardDuplicates: true,
|
||||
discardComments: {
|
||||
removeAll: true,
|
||||
},
|
||||
},
|
||||
canPrint: true,
|
||||
}),
|
||||
);
|
||||
plugins.push(require('autoprefixer'));
|
||||
|
||||
plugins.push(
|
||||
new ImageSpritePlugin({
|
||||
exclude: /exclude|original|default-|icons|sprite|svg|logo|favicon/,
|
||||
commentOrigin: false,
|
||||
compress: COMPRESS,
|
||||
extensions: ['png'],
|
||||
indent: '',
|
||||
log: true,
|
||||
//outputPath: path.join(__dirname, conf.APPDIR, conf.DIST),
|
||||
outputFilename: 'img/sprite-[hash].png',
|
||||
padding: 0,
|
||||
}),
|
||||
);
|
||||
plugins.push(
|
||||
new ImageSpritePlugin({
|
||||
exclude: /exclude|original|default-|icons|sprite|logo|favicon/,
|
||||
commentOrigin: false,
|
||||
compress: COMPRESS,
|
||||
extensions: ['png'],
|
||||
indent: '',
|
||||
log: true,
|
||||
//outputPath: path.join(__dirname, conf.APPDIR, conf.DIST),
|
||||
outputFilename: 'img/sprite-[hash].png',
|
||||
padding: 0,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html');
|
||||
if (filesystem.existsSync(indexPath)) {
|
||||
plugins.push(
|
||||
new HtmlWebpackPlugin({
|
||||
publicPath: '',
|
||||
template: path.join(conf.APPDIR, conf.SRC, 'index.html'),
|
||||
templateParameters: {
|
||||
NODE_ENV: NODE_ENV,
|
||||
GRAPHQL_URL: conf['GRAPHQL_URL'],
|
||||
STATIC_URL: conf['STATIC_URL'],
|
||||
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>',
|
||||
},
|
||||
}),
|
||||
);
|
||||
plugins.push(
|
||||
new HtmlWebpackPlugin({
|
||||
publicPath: '',
|
||||
template: path.join(conf.APPDIR, conf.SRC, 'index.html'),
|
||||
templateParameters: {
|
||||
NODE_ENV: NODE_ENV,
|
||||
GRAPHQL_URL: conf['GRAPHQL_URL'],
|
||||
STATIC_URL: conf['STATIC_URL'],
|
||||
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>',
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png');
|
||||
if (filesystem.existsSync(faviconPath)) {
|
||||
plugins.push(
|
||||
new FaviconsWebpackPlugin({
|
||||
title: 'Webpack App',
|
||||
logo: faviconPath,
|
||||
prefix: '/icons/',
|
||||
emitStats: false,
|
||||
persistentCache: true,
|
||||
inject: false,
|
||||
statsFilename: path.join(
|
||||
conf.APPDIR,
|
||||
conf.DIST,
|
||||
'icons',
|
||||
'iconstats.json',
|
||||
),
|
||||
icons: {
|
||||
android: true,
|
||||
appleIcon: true,
|
||||
appleStartup: true,
|
||||
coast: true,
|
||||
favicons: true,
|
||||
firefox: true,
|
||||
opengraph: true,
|
||||
twitter: true,
|
||||
yandex: true,
|
||||
windows: true,
|
||||
},
|
||||
}),
|
||||
);
|
||||
plugins.push(
|
||||
new FaviconsWebpackPlugin({
|
||||
title: 'Webpack App',
|
||||
logo: faviconPath,
|
||||
prefix: '/icons/',
|
||||
emitStats: false,
|
||||
persistentCache: true,
|
||||
inject: false,
|
||||
statsFilename: path.join(
|
||||
conf.APPDIR,
|
||||
conf.DIST,
|
||||
'icons',
|
||||
'iconstats.json',
|
||||
),
|
||||
icons: {
|
||||
android: true,
|
||||
appleIcon: true,
|
||||
appleStartup: true,
|
||||
coast: true,
|
||||
favicons: true,
|
||||
firefox: true,
|
||||
opengraph: true,
|
||||
twitter: true,
|
||||
yandex: true,
|
||||
windows: true,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
// add themes favicons
|
||||
commonVariables.themes.forEach((theme) => {
|
||||
const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
|
||||
if (filesystem.existsSync(faviconPath)) {
|
||||
plugins.push(
|
||||
new FaviconsWebpackPlugin({
|
||||
title: 'Webpack App',
|
||||
logo: faviconPath,
|
||||
prefix: '/' + theme + '-icons/',
|
||||
emitStats: false,
|
||||
persistentCache: true,
|
||||
inject: false,
|
||||
statsFilename: path.join(
|
||||
conf.APPDIR,
|
||||
conf.DIST,
|
||||
theme + '-icons',
|
||||
'iconstats.json',
|
||||
),
|
||||
icons: {
|
||||
android: true,
|
||||
appleIcon: true,
|
||||
appleStartup: true,
|
||||
coast: true,
|
||||
favicons: true,
|
||||
firefox: true,
|
||||
opengraph: true,
|
||||
twitter: true,
|
||||
yandex: true,
|
||||
windows: true,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
|
||||
if (filesystem.existsSync(faviconPath)) {
|
||||
plugins.push(
|
||||
new FaviconsWebpackPlugin({
|
||||
title: 'Webpack App',
|
||||
logo: faviconPath,
|
||||
prefix: '/' + theme + '-icons/',
|
||||
emitStats: false,
|
||||
persistentCache: true,
|
||||
inject: false,
|
||||
statsFilename: path.join(
|
||||
conf.APPDIR,
|
||||
conf.DIST,
|
||||
theme + '-icons',
|
||||
'iconstats.json',
|
||||
),
|
||||
icons: {
|
||||
android: true,
|
||||
appleIcon: true,
|
||||
appleStartup: true,
|
||||
coast: true,
|
||||
favicons: true,
|
||||
firefox: true,
|
||||
opengraph: true,
|
||||
twitter: true,
|
||||
yandex: true,
|
||||
windows: true,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
|
||||
.BundleAnalyzerPlugin;
|
||||
.BundleAnalyzerPlugin;
|
||||
plugins.push(
|
||||
new BundleAnalyzerPlugin({
|
||||
analyzerMode: 'static',
|
||||
openAnalyzer: false,
|
||||
}),
|
||||
new BundleAnalyzerPlugin({
|
||||
analyzerMode: 'static',
|
||||
openAnalyzer: false,
|
||||
}),
|
||||
);
|
||||
|
||||
const cfg = merge(common, {
|
||||
mode: NODE_ENV,
|
||||
cache: {
|
||||
type: 'filesystem',
|
||||
},
|
||||
recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'),
|
||||
optimization: {
|
||||
//removeAvailableModules: false,
|
||||
//realContentHash: false,
|
||||
splitChunks: {
|
||||
name: 'vendor',
|
||||
minChunks: 2,
|
||||
},
|
||||
concatenateModules: true, //ModuleConcatenationPlugin
|
||||
minimizer: [
|
||||
new TerserPlugin({
|
||||
terserOptions: {
|
||||
module: false,
|
||||
parse: {
|
||||
// we want terser to parse ecma 8 code. However, we don't want it
|
||||
// to apply any minfication steps that turns valid ecma 5 code
|
||||
// into invalid ecma 5 code. This is why the 'compress' and 'output'
|
||||
// sections only apply transformations that are ecma 5 safe
|
||||
// https://github.com/facebook/create-react-app/pull/4234
|
||||
ecma: 8,
|
||||
},
|
||||
compress: {
|
||||
ecma: 5,
|
||||
warnings: false,
|
||||
// Disabled because of an issue with Uglify breaking seemingly valid code:
|
||||
// https://github.com/facebook/create-react-app/issues/2376
|
||||
// Pending further investigation:
|
||||
// https://github.com/mishoo/UglifyJS2/issues/2011
|
||||
comparisons: false,
|
||||
},
|
||||
keep_fnames: true,
|
||||
keep_classnames: true,
|
||||
mode: NODE_ENV,
|
||||
cache: {
|
||||
type: 'filesystem',
|
||||
},
|
||||
recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'),
|
||||
optimization: {
|
||||
//removeAvailableModules: false,
|
||||
//realContentHash: false,
|
||||
splitChunks: {
|
||||
name: 'vendor',
|
||||
minChunks: 2,
|
||||
},
|
||||
concatenateModules: true, //ModuleConcatenationPlugin
|
||||
minimizer: [
|
||||
new TerserPlugin({
|
||||
terserOptions: {
|
||||
module: false,
|
||||
parse: {
|
||||
// we want terser to parse ecma 8 code. However, we don't want it
|
||||
// to apply any minfication steps that turns valid ecma 5 code
|
||||
// into invalid ecma 5 code. This is why the 'compress' and 'output'
|
||||
// sections only apply transformations that are ecma 5 safe
|
||||
// https://github.com/facebook/create-react-app/pull/4234
|
||||
ecma: 8,
|
||||
},
|
||||
compress: {
|
||||
ecma: 5,
|
||||
warnings: false,
|
||||
// Disabled because of an issue with Uglify breaking seemingly valid code:
|
||||
// https://github.com/facebook/create-react-app/issues/2376
|
||||
// Pending further investigation:
|
||||
// https://github.com/mishoo/UglifyJS2/issues/2011
|
||||
comparisons: false,
|
||||
},
|
||||
keep_fnames: true,
|
||||
keep_classnames: true,
|
||||
|
||||
mangle: {
|
||||
safari10: true,
|
||||
keep_fnames: true,
|
||||
keep_classnames: true,
|
||||
reserved: ['$', 'jQuery', 'jquery'],
|
||||
},
|
||||
output: {
|
||||
ecma: 5,
|
||||
comments: false,
|
||||
// Turned on because emoji and regex is not minified properly using default
|
||||
// https://github.com/facebook/create-react-app/issues/2488
|
||||
ascii_only: true,
|
||||
},
|
||||
},
|
||||
// Use multi-process parallel running to improve the build speed
|
||||
// Default number of concurrent runs: os.cpus().length - 1
|
||||
parallel: true,
|
||||
}),
|
||||
],
|
||||
},
|
||||
mangle: {
|
||||
safari10: true,
|
||||
keep_fnames: true,
|
||||
keep_classnames: true,
|
||||
reserved: ['$', 'jQuery', 'jquery'],
|
||||
},
|
||||
output: {
|
||||
ecma: 5,
|
||||
comments: false,
|
||||
// Turned on because emoji and regex is not minified properly using default
|
||||
// https://github.com/facebook/create-react-app/issues/2488
|
||||
ascii_only: true,
|
||||
},
|
||||
},
|
||||
// Use multi-process parallel running to improve the build speed
|
||||
// Default number of concurrent runs: os.cpus().length - 1
|
||||
parallel: true,
|
||||
}),
|
||||
],
|
||||
},
|
||||
|
||||
output: {
|
||||
publicPath: path.join(conf.APPDIR, conf.DIST),
|
||||
path: path.join(__dirname, conf.APPDIR, conf.DIST),
|
||||
filename: path.join('js', '[name].js'),
|
||||
},
|
||||
output: {
|
||||
publicPath: path.join(conf.APPDIR, conf.DIST),
|
||||
path: path.join(__dirname, conf.APPDIR, conf.DIST),
|
||||
filename: path.join('js', '[name].js'),
|
||||
},
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.jsx?$/,
|
||||
//exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
'@babel/preset-env',
|
||||
'@babel/react',
|
||||
{
|
||||
plugins: [
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
],
|
||||
},
|
||||
], //Preset used for env setup
|
||||
plugins: [['@babel/transform-react-jsx']],
|
||||
cacheDirectory: true,
|
||||
cacheCompression: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.s?css$/,
|
||||
use: [
|
||||
{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: !COMPRESS,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'resolve-url-loader',
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: !COMPRESS,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'fonts/',
|
||||
publicPath: '../fonts/',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'fonts/',
|
||||
publicPath: '../fonts/',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.(png|webp|jpg|jpeg|gif|svg)$/,
|
||||
use: [
|
||||
{
|
||||
loader: 'img-optimize-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'img/',
|
||||
publicPath: '../img/',
|
||||
compress: {
|
||||
// This will take more time and get smaller images.
|
||||
mode: 'low', // 'lossless', 'high', 'low'
|
||||
disableOnDevelopment: true,
|
||||
webp: conf['webp'],
|
||||
// loseless compression for png
|
||||
optipng: {
|
||||
optimizationLevel: 4,
|
||||
},
|
||||
// lossy compression for png. This will generate smaller file than optipng.
|
||||
pngquant: {
|
||||
quality: [0.2, 0.8],
|
||||
},
|
||||
// Compression for svg.
|
||||
svgo: true,
|
||||
// Compression for gif.
|
||||
gifsicle: {
|
||||
optimizationLevel: 3,
|
||||
},
|
||||
// Compression for jpg.
|
||||
mozjpeg: {
|
||||
progressive: true,
|
||||
quality: 60,
|
||||
},
|
||||
},
|
||||
inline: {
|
||||
limit: 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.jsx?$/,
|
||||
//exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
'@babel/preset-env',
|
||||
'@babel/react',
|
||||
{
|
||||
plugins: [
|
||||
'@babel/plugin-proposal-class-properties',
|
||||
],
|
||||
},
|
||||
], //Preset used for env setup
|
||||
plugins: [
|
||||
['@babel/transform-react-jsx']
|
||||
],
|
||||
cacheDirectory: true,
|
||||
cacheCompression: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
test: /\.s?css$/,
|
||||
use: [{
|
||||
loader: MiniCssExtractPlugin.loader,
|
||||
},
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: !COMPRESS,
|
||||
},
|
||||
},
|
||||
{
|
||||
loader: 'resolve-url-loader',
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: !COMPRESS,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /fontawesome([^.]+).(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
|
||||
use: [{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'fonts/',
|
||||
publicPath: '../fonts/',
|
||||
},
|
||||
}, ],
|
||||
},
|
||||
{
|
||||
test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
|
||||
use: [{
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'fonts/',
|
||||
publicPath: '../fonts/',
|
||||
},
|
||||
}, ],
|
||||
},
|
||||
{
|
||||
test: /\.(png|webp|jpg|jpeg|gif|svg)$/,
|
||||
use: [{
|
||||
loader: 'img-optimize-loader',
|
||||
options: {
|
||||
name: '[name].[ext]',
|
||||
outputPath: 'img/',
|
||||
publicPath: '../img/',
|
||||
compress: {
|
||||
// This will take more time and get smaller images.
|
||||
mode: 'low', // 'lossless', 'high', 'low'
|
||||
disableOnDevelopment: true,
|
||||
webp: conf['webp'],
|
||||
// loseless compression for png
|
||||
optipng: {
|
||||
optimizationLevel: 4,
|
||||
},
|
||||
// lossy compression for png. This will generate smaller file than optipng.
|
||||
pngquant: {
|
||||
quality: [0.2, 0.8],
|
||||
},
|
||||
// Compression for svg.
|
||||
svgo: true,
|
||||
// Compression for gif.
|
||||
gifsicle: {
|
||||
optimizationLevel: 3,
|
||||
},
|
||||
// Compression for jpg.
|
||||
mozjpeg: {
|
||||
progressive: true,
|
||||
quality: 60,
|
||||
},
|
||||
},
|
||||
inline: {
|
||||
limit: 1,
|
||||
},
|
||||
},
|
||||
}, ],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
plugins: plugins,
|
||||
plugins: plugins,
|
||||
});
|
||||
|
||||
console.log(cfg);
|
||||
|
||||
@ -66,8 +66,7 @@ if (filesystem.existsSync(indexPath)) {
|
||||
GRAPHQL_URL: conf['GRAPHQL_URL'],
|
||||
STATIC_URL: conf['STATIC_URL'],
|
||||
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>',
|
||||
},
|
||||
}),
|
||||
);
|
||||
@ -89,8 +88,8 @@ const config = merge(common, {
|
||||
filename: '[name].js',
|
||||
// necessary for HMR to know where to load the hot update chunks
|
||||
publicPath: `http${conf['HTTPS'] ? 's' : ''}://${conf['HOSTNAME']}:${
|
||||
conf.PORT
|
||||
}/`,
|
||||
conf.PORT
|
||||
}/`,
|
||||
},
|
||||
|
||||
module: {
|
||||
@ -142,7 +141,7 @@ const config = merge(common, {
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
|
||||
test: /fontawesome([^.]+).(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
|
||||
use: [{
|
||||
loader: 'url-loader',
|
||||
}, ],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user