Use webpack environment variables in build.sh
This commit is contained in:
Mark McDowall
parent
684626ef73
commit
56a33e3b4c
10
build.sh
10
build.sh
|
|
@ -141,7 +141,7 @@ Build()
|
||||||
ProgressEnd 'Build'
|
ProgressEnd 'Build'
|
||||||
}
|
}
|
||||||
|
|
||||||
RunGulp()
|
RunWebpack()
|
||||||
{
|
{
|
||||||
ProgressStart 'yarn install'
|
ProgressStart 'yarn install'
|
||||||
yarn install
|
yarn install
|
||||||
|
|
@ -149,9 +149,9 @@ RunGulp()
|
||||||
|
|
||||||
LintUI
|
LintUI
|
||||||
|
|
||||||
ProgressStart 'Running gulp'
|
ProgressStart 'Running webpack'
|
||||||
CheckExitCode yarn run build --production
|
CheckExitCode yarn run build --env production
|
||||||
ProgressEnd 'Running gulp'
|
ProgressEnd 'Running webpack'
|
||||||
}
|
}
|
||||||
|
|
||||||
CreateMdbs()
|
CreateMdbs()
|
||||||
|
|
@ -447,7 +447,7 @@ esac
|
||||||
UpdateVersionNumber
|
UpdateVersionNumber
|
||||||
Build
|
Build
|
||||||
CreateReleaseInfo
|
CreateReleaseInfo
|
||||||
RunGulp
|
RunWebpack
|
||||||
PackageMono
|
PackageMono
|
||||||
PackageMacOS
|
PackageMacOS
|
||||||
PackageMacOSApp
|
PackageMacOSApp
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
/* eslint-disable filenames/match-exported */
|
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
const webpack = require('webpack');
|
const webpack = require('webpack');
|
||||||
const CopyPlugin = require('copy-webpack-plugin');
|
const CopyPlugin = require('copy-webpack-plugin');
|
||||||
|
|
@ -7,255 +6,256 @@ const LiveReloadPlugin = require('webpack-livereload-plugin');
|
||||||
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
||||||
const TerserPlugin = require('terser-webpack-plugin');
|
const TerserPlugin = require('terser-webpack-plugin');
|
||||||
|
|
||||||
const uiFolder = 'UI';
|
module.exports = (env) => {
|
||||||
const frontendFolder = path.join(__dirname, '..');
|
const uiFolder = 'UI';
|
||||||
const srcFolder = path.join(frontendFolder, 'src');
|
const frontendFolder = path.join(__dirname, '..');
|
||||||
const isProduction = process.argv.indexOf('--production') > -1;
|
const srcFolder = path.join(frontendFolder, 'src');
|
||||||
const isProfiling = isProduction && process.argv.indexOf('--profile') > -1;
|
const isProduction = !!env.production;
|
||||||
const inlineWebWorkers = 'no-fallback';
|
const isProfiling = isProduction && !!env.profile;
|
||||||
|
const inlineWebWorkers = 'no-fallback';
|
||||||
|
|
||||||
const distFolder = path.resolve(frontendFolder, '..', '_output', uiFolder);
|
const distFolder = path.resolve(frontendFolder, '..', '_output', uiFolder);
|
||||||
|
|
||||||
console.log('Source Folder:', srcFolder);
|
console.log('Source Folder:', srcFolder);
|
||||||
console.log('Output Folder:', distFolder);
|
console.log('Output Folder:', distFolder);
|
||||||
console.log('isProduction:', isProduction);
|
console.log('isProduction:', isProduction);
|
||||||
console.log('isProfiling:', isProfiling);
|
console.log('isProfiling:', isProfiling);
|
||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
mode: isProduction ? 'production' : 'development',
|
mode: isProduction ? 'production' : 'development',
|
||||||
devtool: 'source-map',
|
devtool: 'source-map',
|
||||||
|
|
||||||
stats: {
|
stats: {
|
||||||
children: false
|
children: false
|
||||||
},
|
},
|
||||||
|
|
||||||
watchOptions: {
|
watchOptions: {
|
||||||
ignored: /node_modules/
|
ignored: /node_modules/
|
||||||
},
|
},
|
||||||
|
|
||||||
entry: {
|
entry: {
|
||||||
index: 'index.js'
|
index: 'index.js'
|
||||||
},
|
},
|
||||||
|
|
||||||
resolve: {
|
resolve: {
|
||||||
modules: [
|
modules: [
|
||||||
srcFolder,
|
srcFolder,
|
||||||
path.join(srcFolder, 'Shims'),
|
path.join(srcFolder, 'Shims'),
|
||||||
'node_modules'
|
'node_modules'
|
||||||
],
|
],
|
||||||
alias: {
|
alias: {
|
||||||
jquery: 'jquery/src/jquery'
|
jquery: 'jquery/src/jquery'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
output: {
|
output: {
|
||||||
path: distFolder,
|
path: distFolder,
|
||||||
publicPath: '/',
|
publicPath: '/',
|
||||||
filename: '[name].js',
|
filename: '[name].js',
|
||||||
sourceMapFilename: '[file].map'
|
sourceMapFilename: '[file].map'
|
||||||
},
|
},
|
||||||
|
|
||||||
optimization: {
|
optimization: {
|
||||||
moduleIds: 'deterministic',
|
moduleIds: 'deterministic',
|
||||||
chunkIds: 'named',
|
chunkIds: 'named',
|
||||||
splitChunks: {
|
splitChunks: {
|
||||||
chunks: 'initial',
|
chunks: 'initial',
|
||||||
name: 'vendors'
|
name: 'vendors'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
performance: {
|
performance: {
|
||||||
hints: false
|
hints: false
|
||||||
},
|
},
|
||||||
|
|
||||||
plugins: [
|
plugins: [
|
||||||
new webpack.DefinePlugin({
|
new webpack.DefinePlugin({
|
||||||
__DEV__: !isProduction,
|
__DEV__: !isProduction,
|
||||||
'process.env.NODE_ENV': isProduction ? JSON.stringify('production') : JSON.stringify('development')
|
'process.env.NODE_ENV': isProduction ? JSON.stringify('production') : JSON.stringify('development')
|
||||||
}),
|
}),
|
||||||
|
|
||||||
new MiniCssExtractPlugin({
|
new MiniCssExtractPlugin({
|
||||||
filename: 'Content/styles.css'
|
filename: 'Content/styles.css'
|
||||||
}),
|
}),
|
||||||
|
|
||||||
new HtmlWebpackPlugin({
|
new HtmlWebpackPlugin({
|
||||||
template: 'frontend/src/index.html',
|
template: 'frontend/src/index.html',
|
||||||
filename: 'index.html',
|
filename: 'index.html',
|
||||||
publicPath: '/'
|
publicPath: '/'
|
||||||
}),
|
}),
|
||||||
|
|
||||||
new CopyPlugin({
|
new CopyPlugin({
|
||||||
patterns: [
|
patterns: [
|
||||||
// HTML
|
// HTML
|
||||||
{
|
{
|
||||||
from: 'frontend/src/*.html',
|
from: 'frontend/src/*.html',
|
||||||
to: path.join(distFolder, '[name][ext]'),
|
to: path.join(distFolder, '[name][ext]'),
|
||||||
globOptions: {
|
globOptions: {
|
||||||
ignore: ['**/index.html']
|
ignore: ['**/index.html']
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// Fonts
|
||||||
|
{
|
||||||
|
from: 'frontend/src/Content/Fonts/*.*',
|
||||||
|
to: path.join(distFolder, 'Content/Fonts', '[name][ext]')
|
||||||
|
},
|
||||||
|
|
||||||
|
// Icon Images
|
||||||
|
{
|
||||||
|
from: 'frontend/src/Content/Images/Icons/*.*',
|
||||||
|
to: path.join(distFolder, 'Content/Images/Icons', '[name][ext]')
|
||||||
|
},
|
||||||
|
|
||||||
|
// Images
|
||||||
|
{
|
||||||
|
from: 'frontend/src/Content/Images/*.*',
|
||||||
|
to: path.join(distFolder, 'Content/Images', '[name][ext]')
|
||||||
|
},
|
||||||
|
|
||||||
|
// Robots
|
||||||
|
{
|
||||||
|
from: 'frontend/src/Content/robots.txt',
|
||||||
|
to: path.join(distFolder, 'Content', '[name][ext]')
|
||||||
}
|
}
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
|
||||||
|
new LiveReloadPlugin()
|
||||||
|
],
|
||||||
|
|
||||||
|
resolveLoader: {
|
||||||
|
modules: [
|
||||||
|
'node_modules',
|
||||||
|
'frontend/build/webpack/'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.worker\.js$/,
|
||||||
|
use: {
|
||||||
|
loader: 'worker-loader',
|
||||||
|
options: {
|
||||||
|
filename: '[name].js',
|
||||||
|
inline: inlineWebWorkers
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.js?$/,
|
||||||
|
exclude: /(node_modules|JsLibraries)/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
configFile: `${frontendFolder}/babel.config.js`,
|
||||||
|
envName: isProduction ? 'production' : 'development',
|
||||||
|
presets: [
|
||||||
|
[
|
||||||
|
'@babel/preset-env',
|
||||||
|
{
|
||||||
|
modules: false,
|
||||||
|
loose: true,
|
||||||
|
debug: false,
|
||||||
|
useBuiltIns: 'entry',
|
||||||
|
corejs: 3
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// CSS Modules
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
exclude: /(node_modules|globals.css)/,
|
||||||
|
use: [
|
||||||
|
{ loader: MiniCssExtractPlugin.loader },
|
||||||
|
{
|
||||||
|
loader: 'css-loader',
|
||||||
|
options: {
|
||||||
|
importLoaders: 1,
|
||||||
|
modules: {
|
||||||
|
localIdentName: '[name]/[local]/[hash:base64:5]'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: 'postcss-loader',
|
||||||
|
options: {
|
||||||
|
postcssOptions: {
|
||||||
|
config: 'frontend/postcss.config.js'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
// Global styles
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
include: /(node_modules|globals.css)/,
|
||||||
|
use: [
|
||||||
|
'style-loader',
|
||||||
|
{
|
||||||
|
loader: 'css-loader'
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
// Fonts
|
// Fonts
|
||||||
{
|
{
|
||||||
from: 'frontend/src/Content/Fonts/*.*',
|
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
||||||
to: path.join(distFolder, 'Content/Fonts', '[name][ext]')
|
use: [
|
||||||
|
{
|
||||||
|
loader: 'url-loader',
|
||||||
|
options: {
|
||||||
|
limit: 10240,
|
||||||
|
mimetype: 'application/font-woff',
|
||||||
|
emitFile: false,
|
||||||
|
name: 'Content/Fonts/[name].[ext]'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
},
|
},
|
||||||
|
|
||||||
// Icon Images
|
|
||||||
{
|
{
|
||||||
from: 'frontend/src/Content/Images/Icons/*.*',
|
test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
||||||
to: path.join(distFolder, 'Content/Images/Icons', '[name][ext]')
|
use: [
|
||||||
},
|
{
|
||||||
|
loader: 'file-loader',
|
||||||
// Images
|
options: {
|
||||||
{
|
emitFile: false,
|
||||||
from: 'frontend/src/Content/Images/*.*',
|
name: 'Content/Fonts/[name].[ext]'
|
||||||
to: path.join(distFolder, 'Content/Images', '[name][ext]')
|
}
|
||||||
},
|
}
|
||||||
|
]
|
||||||
// Robots
|
|
||||||
{
|
|
||||||
from: 'frontend/src/Content/robots.txt',
|
|
||||||
to: path.join(distFolder, 'Content', '[name][ext]')
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}),
|
}
|
||||||
|
};
|
||||||
|
|
||||||
new LiveReloadPlugin()
|
if (isProfiling) {
|
||||||
],
|
config.resolve.alias['react-dom$'] = 'react-dom/profiling';
|
||||||
|
config.resolve.alias['scheduler/tracing'] = 'scheduler/tracing-profiling';
|
||||||
|
|
||||||
resolveLoader: {
|
config.optimization.minimizer = [
|
||||||
modules: [
|
new TerserPlugin({
|
||||||
'node_modules',
|
cache: true,
|
||||||
'frontend/build/webpack/'
|
parallel: true,
|
||||||
]
|
sourceMap: true, // Must be set to true if using source-maps in production
|
||||||
},
|
terserOptions: {
|
||||||
|
mangle: false,
|
||||||
module: {
|
keep_classnames: true,
|
||||||
rules: [
|
keep_fnames: true
|
||||||
{
|
|
||||||
test: /\.worker\.js$/,
|
|
||||||
use: {
|
|
||||||
loader: 'worker-loader',
|
|
||||||
options: {
|
|
||||||
filename: '[name].js',
|
|
||||||
inline: inlineWebWorkers
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
})
|
||||||
{
|
];
|
||||||
test: /\.js?$/,
|
|
||||||
exclude: /(node_modules|JsLibraries)/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'babel-loader',
|
|
||||||
options: {
|
|
||||||
configFile: `${frontendFolder}/babel.config.js`,
|
|
||||||
envName: isProduction ? 'production' : 'development',
|
|
||||||
presets: [
|
|
||||||
[
|
|
||||||
'@babel/preset-env',
|
|
||||||
{
|
|
||||||
modules: false,
|
|
||||||
loose: true,
|
|
||||||
debug: false,
|
|
||||||
useBuiltIns: 'entry',
|
|
||||||
corejs: 3
|
|
||||||
}
|
|
||||||
]
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
// CSS Modules
|
|
||||||
{
|
|
||||||
test: /\.css$/,
|
|
||||||
exclude: /(node_modules|globals.css)/,
|
|
||||||
use: [
|
|
||||||
{ loader: MiniCssExtractPlugin.loader },
|
|
||||||
{
|
|
||||||
loader: 'css-loader',
|
|
||||||
options: {
|
|
||||||
importLoaders: 1,
|
|
||||||
modules: {
|
|
||||||
localIdentName: '[name]/[local]/[hash:base64:5]'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loader: 'postcss-loader',
|
|
||||||
options: {
|
|
||||||
postcssOptions: {
|
|
||||||
config: 'frontend/postcss.config.js'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
// Global styles
|
|
||||||
{
|
|
||||||
test: /\.css$/,
|
|
||||||
include: /(node_modules|globals.css)/,
|
|
||||||
use: [
|
|
||||||
'style-loader',
|
|
||||||
{
|
|
||||||
loader: 'css-loader'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
// Fonts
|
|
||||||
{
|
|
||||||
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'url-loader',
|
|
||||||
options: {
|
|
||||||
limit: 10240,
|
|
||||||
mimetype: 'application/font-woff',
|
|
||||||
emitFile: false,
|
|
||||||
name: 'Content/Fonts/[name].[ext]'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
{
|
|
||||||
test: /\.(ttf|eot|eot?#iefix|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'file-loader',
|
|
||||||
options: {
|
|
||||||
emitFile: false,
|
|
||||||
name: 'Content/Fonts/[name].[ext]'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
return config;
|
||||||
};
|
};
|
||||||
|
|
||||||
if (isProfiling) {
|
|
||||||
config.resolve.alias['react-dom$'] = 'react-dom/profiling';
|
|
||||||
config.resolve.alias['scheduler/tracing'] = 'scheduler/tracing-profiling';
|
|
||||||
|
|
||||||
config.optimization.minimizer = [
|
|
||||||
new TerserPlugin({
|
|
||||||
cache: true,
|
|
||||||
parallel: true,
|
|
||||||
sourceMap: true, // Must be set to true if using source-maps in production
|
|
||||||
terserOptions: {
|
|
||||||
mangle: false,
|
|
||||||
keep_classnames: true,
|
|
||||||
keep_fnames: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
];
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = config;
|
|
||||||
/* eslint-enable filenames/match-exported */
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue