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:
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 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.instagram.feed';
|
||||||
|
import '@a2nt/ss-bootstrap-ui-webpack-boilerplate-react/src/js/_ui/_ui.carousel';
|
||||||
|
|
||||||
import './_layout';
|
import './_layout';
|
||||||
|
|
||||||
@ -30,5 +31,5 @@ const images = importAll(
|
|||||||
require.context('../img/', false, /\.(png|jpe?g|svg)$/),
|
require.context('../img/', false, /\.(png|jpe?g|svg)$/),
|
||||||
);
|
);
|
||||||
const fontAwesome = importAll(
|
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-bg: #fff;
|
||||||
$body-color: #212529;
|
$body-color: #212529;
|
||||||
@ -29,8 +30,7 @@ $body-main-nav-link-hover-color: $body-color;
|
|||||||
$body-main-nav-dropdown-hover-bg: $body-color;
|
$body-main-nav-dropdown-hover-bg: $body-color;
|
||||||
$body-footer-footer-bg: $body-bg;
|
$body-footer-footer-bg: $body-bg;
|
||||||
|
|
||||||
$font-family-base: 'Roboto',
|
$font-family-base: 'Roboto';
|
||||||
$font-family-sans-serif;
|
|
||||||
//
|
//
|
||||||
|
|
||||||
$full-body-min-width: map-get($grid-breakpoints, 'lg');
|
$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-shadow: 1px 1px $black;
|
||||||
$carousel-controls-hover-bg: transparentize($black, 0.4);
|
$carousel-controls-hover-bg: transparentize($black, 0.4);
|
||||||
$carousel-slide-img-loading-max-height: 70vh;
|
$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,
|
$url,
|
||||||
$matches
|
$matches
|
||||||
);
|
);
|
||||||
$videoID = $matches[1];
|
if (isset($matches[1])) {
|
||||||
|
$videoID = $matches[1];
|
||||||
|
|
||||||
$params = array_merge($params, [
|
$params = array_merge($params, [
|
||||||
'feature=oembed',
|
'feature=oembed',
|
||||||
'wmode=transparent',
|
'wmode=transparent',
|
||||||
'enablejsapi=1',
|
'enablejsapi=1',
|
||||||
'disablekb=1',
|
'disablekb=1',
|
||||||
'iv_load_policy=3',
|
'iv_load_policy=3',
|
||||||
'modestbranding=1',
|
'modestbranding=1',
|
||||||
'rel=0',
|
'rel=0',
|
||||||
'showinfo=0',
|
'showinfo=0',
|
||||||
//'controls='.($this->owner->getField('Controls') ? '1': '0')
|
//'controls='.($this->owner->getField('Controls') ? '1': '0')
|
||||||
]);
|
]);
|
||||||
|
|
||||||
if ($this->owner->getField('Autoplay')) {
|
if ($this->owner->getField('Autoplay')) {
|
||||||
$params[] = 'autoplay=1';
|
$params[] = 'autoplay=1';
|
||||||
$params[] = 'mute=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) {
|
if (stripos($this->owner->EmbedHTML, 'https://player.vimeo.com/video/') > 0) {
|
||||||
|
@ -26,7 +26,7 @@
|
|||||||
|
|
||||||
<% include Objects\SocialLinks %>
|
<% include Objects\SocialLinks %>
|
||||||
<% end_with %>
|
<% end_with %>
|
||||||
|
|
||||||
<% include LocaleMenu %>
|
<% include LocaleMenu %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -6,7 +6,7 @@
|
|||||||
<% else %>
|
<% else %>
|
||||||
<% if $Image || $ImageURL %>
|
<% if $Image || $ImageURL %>
|
||||||
<span class="img">
|
<span class="img">
|
||||||
<img class="carosel__img"
|
<img class="carousel__img"
|
||||||
src="{$EmptyImgSrc}"
|
src="{$EmptyImgSrc}"
|
||||||
data-lazy-src="<% if $ImageURL %>$ImageURL<% else %>$Image.FocusFill($SlideWidth,$SlideHeight).URL<% end_if %>"
|
data-lazy-src="<% if $ImageURL %>$ImageURL<% else %>$Image.FocusFill($SlideWidth,$SlideHeight).URL<% end_if %>"
|
||||||
alt="<% if $Headline %>$Headline.XML<% 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']);
|
console.log('GRAPHQL_API_KEY: ' + conf['GRAPHQL_API_KEY']);
|
||||||
|
|
||||||
let plugins = [
|
let plugins = [
|
||||||
new webpack.ProvidePlugin({
|
new webpack.ProvidePlugin({
|
||||||
react: 'React',
|
react: 'React',
|
||||||
'react-dom': 'ReactDOM',
|
'react-dom': 'ReactDOM',
|
||||||
/*$: 'jquery',
|
/*$: 'jquery',
|
||||||
jQuery: 'jquery',
|
jQuery: 'jquery',
|
||||||
Popper: ['popper.js', 'default'],
|
Popper: ['popper.js', 'default'],
|
||||||
Util: 'exports-loader?Util!bootstrap/js/dist/util',
|
Util: 'exports-loader?Util!bootstrap/js/dist/util',
|
||||||
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
|
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
|
||||||
Button: 'exports-loader?Button!bootstrap/js/dist/button',
|
Button: 'exports-loader?Button!bootstrap/js/dist/button',
|
||||||
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
|
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
|
||||||
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
|
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
|
||||||
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
|
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
|
||||||
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
|
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
|
||||||
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
|
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
|
||||||
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
|
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
|
||||||
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
|
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
|
||||||
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',*/
|
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',*/
|
||||||
}),
|
}),
|
||||||
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),
|
||||||
UIMetaNAME: JSON.stringify(UIMetaInfo.name),
|
UIMetaNAME: JSON.stringify(UIMetaInfo.name),
|
||||||
UIMetaVersion: JSON.stringify(UIMetaInfo.version),
|
UIMetaVersion: JSON.stringify(UIMetaInfo.version),
|
||||||
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(`http://${IP}:${PORT}`),
|
BASE_HREF: JSON.stringify(`http://${IP}:${PORT}`),
|
||||||
}),
|
}),
|
||||||
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(
|
plugins.push(
|
||||||
new OptimizeCssAssetsPlugin({
|
new OptimizeCssAssetsPlugin({
|
||||||
//assetNameRegExp: /\.optimize\.css$/g,
|
//assetNameRegExp: /\.optimize\.css$/g,
|
||||||
cssProcessor: require('cssnano'),
|
cssProcessor: require('cssnano'),
|
||||||
cssProcessorPluginOptions: {
|
cssProcessorPluginOptions: {
|
||||||
preset: ['default'],
|
preset: ['default'],
|
||||||
},
|
},
|
||||||
cssProcessorOptions: {
|
cssProcessorOptions: {
|
||||||
zindex: true,
|
zindex: true,
|
||||||
cssDeclarationSorter: true,
|
cssDeclarationSorter: true,
|
||||||
reduceIdents: false,
|
reduceIdents: false,
|
||||||
mergeIdents: true,
|
mergeIdents: true,
|
||||||
mergeRules: true,
|
mergeRules: true,
|
||||||
mergeLonghand: true,
|
mergeLonghand: true,
|
||||||
discardUnused: true,
|
discardUnused: true,
|
||||||
discardOverridden: true,
|
discardOverridden: true,
|
||||||
discardDuplicates: true,
|
discardDuplicates: true,
|
||||||
discardComments: {
|
discardComments: {
|
||||||
removeAll: true,
|
removeAll: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
canPrint: true,
|
canPrint: true,
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
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|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 (filesystem.existsSync(indexPath)) {
|
if (filesystem.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:
|
REACT_SCRIPTS: NODE_ENV === 'production' ?
|
||||||
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 faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png');
|
const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png');
|
||||||
if (filesystem.existsSync(faviconPath)) {
|
if (filesystem.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
|
||||||
commonVariables.themes.forEach((theme) => {
|
commonVariables.themes.forEach((theme) => {
|
||||||
const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
|
const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
|
||||||
if (filesystem.existsSync(faviconPath)) {
|
if (filesystem.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;
|
||||||
plugins.push(
|
plugins.push(
|
||||||
new BundleAnalyzerPlugin({
|
new BundleAnalyzerPlugin({
|
||||||
analyzerMode: 'static',
|
analyzerMode: 'static',
|
||||||
openAnalyzer: false,
|
openAnalyzer: false,
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
const cfg = merge(common, {
|
const cfg = merge(common, {
|
||||||
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,
|
||||||
//realContentHash: false,
|
//realContentHash: false,
|
||||||
splitChunks: {
|
splitChunks: {
|
||||||
name: 'vendor',
|
name: 'vendor',
|
||||||
minChunks: 2,
|
minChunks: 2,
|
||||||
},
|
},
|
||||||
concatenateModules: true, //ModuleConcatenationPlugin
|
concatenateModules: true, //ModuleConcatenationPlugin
|
||||||
minimizer: [
|
minimizer: [
|
||||||
new TerserPlugin({
|
new TerserPlugin({
|
||||||
terserOptions: {
|
terserOptions: {
|
||||||
module: false,
|
module: false,
|
||||||
parse: {
|
parse: {
|
||||||
// we want terser to parse ecma 8 code. However, we don't want it
|
// 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
|
// to apply any minfication steps that turns valid ecma 5 code
|
||||||
// into invalid ecma 5 code. This is why the 'compress' and 'output'
|
// into invalid ecma 5 code. This is why the 'compress' and 'output'
|
||||||
// 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: 5,
|
ecma: 5,
|
||||||
warnings: false,
|
warnings: false,
|
||||||
// Disabled because of an issue with Uglify breaking seemingly valid code:
|
// Disabled because of an issue with Uglify breaking seemingly valid code:
|
||||||
// https://github.com/facebook/create-react-app/issues/2376
|
// https://github.com/facebook/create-react-app/issues/2376
|
||||||
// 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,
|
||||||
|
|
||||||
mangle: {
|
mangle: {
|
||||||
safari10: true,
|
safari10: true,
|
||||||
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,
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|
||||||
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: /\.jsx?$/,
|
||||||
test: /\.jsx?$/,
|
//exclude: /node_modules/,
|
||||||
//exclude: /node_modules/,
|
use: {
|
||||||
use: {
|
loader: 'babel-loader',
|
||||||
loader: 'babel-loader',
|
options: {
|
||||||
options: {
|
presets: [
|
||||||
presets: [
|
'@babel/preset-env',
|
||||||
'@babel/preset-env',
|
'@babel/react',
|
||||||
'@babel/react',
|
{
|
||||||
{
|
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,
|
],
|
||||||
cacheCompression: true,
|
cacheDirectory: true,
|
||||||
},
|
cacheCompression: true,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
},
|
||||||
test: /\.s?css$/,
|
{
|
||||||
use: [
|
test: /\.s?css$/,
|
||||||
{
|
use: [{
|
||||||
loader: MiniCssExtractPlugin.loader,
|
loader: MiniCssExtractPlugin.loader,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
loader: 'css-loader',
|
loader: 'css-loader',
|
||||||
options: {
|
options: {
|
||||||
sourceMap: !COMPRESS,
|
sourceMap: !COMPRESS,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
loader: 'resolve-url-loader',
|
loader: 'resolve-url-loader',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
loader: 'sass-loader',
|
loader: 'sass-loader',
|
||||||
options: {
|
options: {
|
||||||
sourceMap: !COMPRESS,
|
sourceMap: !COMPRESS,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
|
test: /fontawesome([^.]+).(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
|
||||||
use: [
|
use: [{
|
||||||
{
|
loader: 'file-loader',
|
||||||
loader: 'file-loader',
|
options: {
|
||||||
options: {
|
name: '[name].[ext]',
|
||||||
name: '[name].[ext]',
|
outputPath: 'fonts/',
|
||||||
outputPath: 'fonts/',
|
publicPath: '../fonts/',
|
||||||
publicPath: '../fonts/',
|
},
|
||||||
},
|
}, ],
|
||||||
},
|
},
|
||||||
],
|
{
|
||||||
},
|
test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
|
||||||
{
|
use: [{
|
||||||
test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
|
loader: 'file-loader',
|
||||||
use: [
|
options: {
|
||||||
{
|
name: '[name].[ext]',
|
||||||
loader: 'file-loader',
|
outputPath: 'fonts/',
|
||||||
options: {
|
publicPath: '../fonts/',
|
||||||
name: '[name].[ext]',
|
},
|
||||||
outputPath: 'fonts/',
|
}, ],
|
||||||
publicPath: '../fonts/',
|
},
|
||||||
},
|
{
|
||||||
},
|
test: /\.(png|webp|jpg|jpeg|gif|svg)$/,
|
||||||
],
|
use: [{
|
||||||
},
|
loader: 'img-optimize-loader',
|
||||||
{
|
options: {
|
||||||
test: /\.(png|webp|jpg|jpeg|gif|svg)$/,
|
name: '[name].[ext]',
|
||||||
use: [
|
outputPath: 'img/',
|
||||||
{
|
publicPath: '../img/',
|
||||||
loader: 'img-optimize-loader',
|
compress: {
|
||||||
options: {
|
// This will take more time and get smaller images.
|
||||||
name: '[name].[ext]',
|
mode: 'low', // 'lossless', 'high', 'low'
|
||||||
outputPath: 'img/',
|
disableOnDevelopment: true,
|
||||||
publicPath: '../img/',
|
webp: conf['webp'],
|
||||||
compress: {
|
// loseless compression for png
|
||||||
// This will take more time and get smaller images.
|
optipng: {
|
||||||
mode: 'low', // 'lossless', 'high', 'low'
|
optimizationLevel: 4,
|
||||||
disableOnDevelopment: true,
|
},
|
||||||
webp: conf['webp'],
|
// lossy compression for png. This will generate smaller file than optipng.
|
||||||
// loseless compression for png
|
pngquant: {
|
||||||
optipng: {
|
quality: [0.2, 0.8],
|
||||||
optimizationLevel: 4,
|
},
|
||||||
},
|
// Compression for svg.
|
||||||
// lossy compression for png. This will generate smaller file than optipng.
|
svgo: true,
|
||||||
pngquant: {
|
// Compression for gif.
|
||||||
quality: [0.2, 0.8],
|
gifsicle: {
|
||||||
},
|
optimizationLevel: 3,
|
||||||
// Compression for svg.
|
},
|
||||||
svgo: true,
|
// Compression for jpg.
|
||||||
// Compression for gif.
|
mozjpeg: {
|
||||||
gifsicle: {
|
progressive: true,
|
||||||
optimizationLevel: 3,
|
quality: 60,
|
||||||
},
|
},
|
||||||
// Compression for jpg.
|
},
|
||||||
mozjpeg: {
|
inline: {
|
||||||
progressive: true,
|
limit: 1,
|
||||||
quality: 60,
|
},
|
||||||
},
|
},
|
||||||
},
|
}, ],
|
||||||
inline: {
|
},
|
||||||
limit: 1,
|
],
|
||||||
},
|
},
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
plugins: plugins,
|
plugins: plugins,
|
||||||
});
|
});
|
||||||
|
|
||||||
console.log(cfg);
|
console.log(cfg);
|
||||||
|
@ -66,8 +66,7 @@ if (filesystem.existsSync(indexPath)) {
|
|||||||
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.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.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',
|
filename: '[name].js',
|
||||||
// necessary for HMR to know where to load the hot update chunks
|
// necessary for HMR to know where to load the hot update chunks
|
||||||
publicPath: `http${conf['HTTPS'] ? 's' : ''}://${conf['HOSTNAME']}:${
|
publicPath: `http${conf['HTTPS'] ? 's' : ''}://${conf['HOSTNAME']}:${
|
||||||
conf.PORT
|
conf.PORT
|
||||||
}/`,
|
}/`,
|
||||||
},
|
},
|
||||||
|
|
||||||
module: {
|
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: [{
|
use: [{
|
||||||
loader: 'url-loader',
|
loader: 'url-loader',
|
||||||
}, ],
|
}, ],
|
||||||
|
Loading…
Reference in New Issue
Block a user