|
@ -2,6 +2,7 @@ |
|
|
const webpack = require('webpack'); |
|
|
const webpack = require('webpack'); |
|
|
const glob = require('glob'); |
|
|
const glob = require('glob'); |
|
|
const path = require('path'); |
|
|
const path = require('path'); |
|
|
|
|
|
const CleanWebpackPlugin = require('clean-webpack-plugin'); |
|
|
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin'); |
|
|
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin'); |
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin'); |
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin'); |
|
|
const ImageminPlugin = require('imagemin-webpack-plugin').default; |
|
|
const ImageminPlugin = require('imagemin-webpack-plugin').default; |
|
@ -10,12 +11,16 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
|
|
module.exports = function(env, argv) { |
|
|
module.exports = function(env, argv) { |
|
|
env = env || {}; |
|
|
env = env || {}; |
|
|
const production = !!env.production; |
|
|
const production = !!env.production; |
|
|
|
|
|
const optimizeImages = production || !!env.optimizeImages; |
|
|
|
|
|
|
|
|
const quick = !production && !!env.quick; |
|
|
|
|
|
const minify = production; |
|
|
|
|
|
const sourceMaps = !production; |
|
|
|
|
|
|
|
|
const clean = ['out/ui']; |
|
|
|
|
|
if (optimizeImages) { |
|
|
|
|
|
console.log('Optimizing images (src/ui/images/settings/*.png)...'); |
|
|
|
|
|
clean.push('images/settings'); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
const plugins = [ |
|
|
const plugins = [ |
|
|
|
|
|
new CleanWebpackPlugin(clean), |
|
|
new webpack.optimize.ModuleConcatenationPlugin(), |
|
|
new webpack.optimize.ModuleConcatenationPlugin(), |
|
|
new MiniCssExtractPlugin({ |
|
|
new MiniCssExtractPlugin({ |
|
|
filename: '[name].css' |
|
|
filename: '[name].css' |
|
@ -24,11 +29,11 @@ module.exports = function(env, argv) { |
|
|
excludeAssets: [/.*\.main\.js/], |
|
|
excludeAssets: [/.*\.main\.js/], |
|
|
excludeChunks: ['welcome'], |
|
|
excludeChunks: ['welcome'], |
|
|
template: 'settings/index.html', |
|
|
template: 'settings/index.html', |
|
|
filename: path.resolve(__dirname, '../..', 'settings.html'), |
|
|
|
|
|
|
|
|
filename: path.resolve(__dirname, 'settings.html'), |
|
|
inject: true, |
|
|
inject: true, |
|
|
inlineSource: production ? '.(js|css)$' : undefined, |
|
|
inlineSource: production ? '.(js|css)$' : undefined, |
|
|
// inlineSource: '.(js|css)$',
|
|
|
// inlineSource: '.(js|css)$',
|
|
|
minify: minify |
|
|
|
|
|
|
|
|
minify: production |
|
|
? { |
|
|
? { |
|
|
removeComments: true, |
|
|
removeComments: true, |
|
|
collapseWhitespace: true, |
|
|
collapseWhitespace: true, |
|
@ -44,11 +49,11 @@ module.exports = function(env, argv) { |
|
|
excludeAssets: [/.*\.main\.js/], |
|
|
excludeAssets: [/.*\.main\.js/], |
|
|
excludeChunks: ['settings'], |
|
|
excludeChunks: ['settings'], |
|
|
template: 'welcome/index.html', |
|
|
template: 'welcome/index.html', |
|
|
filename: path.resolve(__dirname, '../..', 'welcome.html'), |
|
|
|
|
|
|
|
|
filename: path.resolve(__dirname, 'welcome.html'), |
|
|
inject: true, |
|
|
inject: true, |
|
|
inlineSource: production ? '.(js|css)$' : undefined, |
|
|
inlineSource: production ? '.(js|css)$' : undefined, |
|
|
// inlineSource: '.(js|css)$',
|
|
|
// inlineSource: '.(js|css)$',
|
|
|
minify: minify |
|
|
|
|
|
|
|
|
minify: production |
|
|
? { |
|
|
? { |
|
|
removeComments: true, |
|
|
removeComments: true, |
|
|
collapseWhitespace: true, |
|
|
collapseWhitespace: true, |
|
@ -60,30 +65,27 @@ module.exports = function(env, argv) { |
|
|
} |
|
|
} |
|
|
: false |
|
|
: false |
|
|
}), |
|
|
}), |
|
|
new HtmlWebpackInlineSourcePlugin() |
|
|
|
|
|
|
|
|
new HtmlWebpackInlineSourcePlugin(), |
|
|
|
|
|
new ImageminPlugin({ |
|
|
|
|
|
disable: !optimizeImages, |
|
|
|
|
|
externalImages: { |
|
|
|
|
|
context: path.resolve(__dirname, 'src/ui/images'), |
|
|
|
|
|
sources: glob.sync('src/ui/images/settings/*.png'), |
|
|
|
|
|
destination: path.resolve(__dirname, 'images') |
|
|
|
|
|
}, |
|
|
|
|
|
gifsicle: null, |
|
|
|
|
|
jpegtran: null, |
|
|
|
|
|
optipng: null, |
|
|
|
|
|
pngquant: { |
|
|
|
|
|
quality: '85-100', |
|
|
|
|
|
speed: production ? 1 : 10 |
|
|
|
|
|
}, |
|
|
|
|
|
svgo: null |
|
|
|
|
|
}) |
|
|
]; |
|
|
]; |
|
|
|
|
|
|
|
|
if (!quick) { |
|
|
|
|
|
plugins.push( |
|
|
|
|
|
new ImageminPlugin({ |
|
|
|
|
|
disable: false, |
|
|
|
|
|
externalImages: { |
|
|
|
|
|
sources: glob.sync(path.resolve(__dirname, 'images/settings/*.png')), |
|
|
|
|
|
destination: path.resolve(__dirname, '../..') |
|
|
|
|
|
}, |
|
|
|
|
|
gifsicle: null, |
|
|
|
|
|
jpegtran: null, |
|
|
|
|
|
optipng: null, |
|
|
|
|
|
pngquant: { |
|
|
|
|
|
quality: '85-100', |
|
|
|
|
|
speed: minify ? 1 : 10 |
|
|
|
|
|
}, |
|
|
|
|
|
svgo: null |
|
|
|
|
|
}) |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
return { |
|
|
return { |
|
|
|
|
|
context: path.resolve(__dirname, 'src/ui'), |
|
|
// This is ugly having main.scss on both bundles, but if it is added separately it will generate a js bundle :(
|
|
|
// This is ugly having main.scss on both bundles, but if it is added separately it will generate a js bundle :(
|
|
|
entry: { |
|
|
entry: { |
|
|
settings: ['./settings/index.ts', './scss/main.scss'], |
|
|
settings: ['./settings/index.ts', './scss/main.scss'], |
|
@ -91,10 +93,10 @@ module.exports = function(env, argv) { |
|
|
// main: ['./scss/main.scss']
|
|
|
// main: ['./scss/main.scss']
|
|
|
}, |
|
|
}, |
|
|
mode: production ? 'production' : 'development', |
|
|
mode: production ? 'production' : 'development', |
|
|
devtool: sourceMaps ? 'eval-source-map' : undefined, |
|
|
|
|
|
|
|
|
devtool: !production ? 'eval-source-map' : undefined, |
|
|
output: { |
|
|
output: { |
|
|
filename: '[name].js', |
|
|
filename: '[name].js', |
|
|
path: path.resolve(__dirname, '../../', 'out/ui'), |
|
|
|
|
|
|
|
|
path: path.resolve(__dirname, 'out/ui'), |
|
|
publicPath: '{{root}}/out/ui/' |
|
|
publicPath: '{{root}}/out/ui/' |
|
|
}, |
|
|
}, |
|
|
optimization: { |
|
|
optimization: { |
|
@ -111,13 +113,18 @@ module.exports = function(env, argv) { |
|
|
}, |
|
|
}, |
|
|
resolve: { |
|
|
resolve: { |
|
|
extensions: ['.tsx', '.ts', '.js'], |
|
|
extensions: ['.tsx', '.ts', '.js'], |
|
|
modules: [path.resolve(__dirname), 'node_modules'] |
|
|
|
|
|
|
|
|
modules: [path.resolve(__dirname, 'src/ui'), 'node_modules'] |
|
|
}, |
|
|
}, |
|
|
module: { |
|
|
module: { |
|
|
rules: [ |
|
|
rules: [ |
|
|
{ |
|
|
{ |
|
|
test: /\.tsx?$/, |
|
|
test: /\.tsx?$/, |
|
|
use: 'ts-loader', |
|
|
|
|
|
|
|
|
use: { |
|
|
|
|
|
loader: 'ts-loader', |
|
|
|
|
|
options: { |
|
|
|
|
|
configFile: 'ui.tsconfig.json' |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
exclude: /node_modules/ |
|
|
exclude: /node_modules/ |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
@ -129,15 +136,15 @@ module.exports = function(env, argv) { |
|
|
{ |
|
|
{ |
|
|
loader: 'css-loader', |
|
|
loader: 'css-loader', |
|
|
options: { |
|
|
options: { |
|
|
minimize: minify, |
|
|
|
|
|
sourceMap: sourceMaps, |
|
|
|
|
|
|
|
|
minimize: production, |
|
|
|
|
|
sourceMap: !production, |
|
|
url: false |
|
|
url: false |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
loader: 'sass-loader', |
|
|
loader: 'sass-loader', |
|
|
options: { |
|
|
options: { |
|
|
sourceMap: sourceMaps |
|
|
|
|
|
|
|
|
sourceMap: !production |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
], |
|
|
], |