tonyair/webpack-bootstrap-ui-kit
1
0
Fork 0
mirror of https://github.com/a2nt/webpack-bootstrap-ui-kit.git synced 2024-10-22 11:05:45 +02:00
Code Issues Projects Releases Wiki Activity

Webpack Image compression, other improvements

Browse Source
This commit is contained in:
Tony Air 2020-01-22 16:49:07 +07:00
parent abc7ee4eed
commit 7b2244efcd
2 changed files with 177 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate", "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
"version": "1.5.8", "version": "1.5.9",
"author": "Tony Air <tony@twma.pro>", "author": "Tony Air <tony@twma.pro>",
"license": "MIT", "license": "MIT",
"description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.", "description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",
@ -86,6 +86,11 @@
"file-loader": "^1.1.5", "file-loader": "^1.1.5",
"html-loader": "^0.5.5", "html-loader": "^0.5.5",
"html-webpack-plugin": "^4.0.0-beta.11", "html-webpack-plugin": "^4.0.0-beta.11",
"imagemin-gifsicle": "^7.0.0",
"imagemin-jpegtran": "^6.0.0",
"imagemin-optipng": "^7.1.0",
"imagemin-svgo": "^7.0.0",
"imagemin-webpack": "^5.1.1",
"lost": "^8.3.1", "lost": "^8.3.1",
"material-design-color": "^2.3.2", "material-design-color": "^2.3.2",
"node-sass": "^4.13.0", "node-sass": "^4.13.0",

181
webpack.config.js
View File

@ -6,35 +6,36 @@ const webpack = require('webpack');
const path = require('path'); const path = require('path');
const filesystem = require('fs'); const filesystem = require('fs');
const autoprefixer = require('autoprefixer'); const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); const ExtractTextPlugin = require('extract-text-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack');
const plugins = [ const plugins = [
new webpack.DefinePlugin({ new webpack.DefinePlugin({
'process.env': { 'process.env': {
'NODE_ENV': JSON.stringify('production') NODE_ENV: JSON.stringify('production'),
} },
}), }),
new webpack.LoaderOptionsPlugin({ new webpack.LoaderOptionsPlugin({
minimize: COMPRESS, minimize: COMPRESS,
debug: false debug: false,
}), }),
new ExtractTextPlugin({ new ExtractTextPlugin({
filename: 'css/[name].css', filename: 'css/[name].css',
allChunks: true allChunks: true,
}), }),
/**/ /**/
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: './src/index.html' template: './src/index.html',
}), }),
]; ];
if (COMPRESS) { if (COMPRESS) {
plugins.push(new OptimizeCssAssetsPlugin({ plugins.push(
new OptimizeCssAssetsPlugin({
//assetNameRegExp: /\.optimize\.css$/g, //assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'), cssProcessor: require('cssnano'),
cssProcessorPluginOptions: { cssProcessorPluginOptions: {
@ -51,17 +52,48 @@ if (COMPRESS) {
discardOverridden: true, discardOverridden: true,
discardDuplicates: true, discardDuplicates: true,
discardComments: { discardComments: {
removeAll: true removeAll: true,
}, },
}, },
canPrint: true canPrint: true,
})); }),
);
plugins.push(
new ImageminPlugin({
bail: false, // Ignore errors on corrupted images
cache: true,
filter: (source, sourcePath) => {
if (source.byteLength < 512000) {
return false;
}
return true;
},
imageminOptions: {
plugins: [
['gifsicle', { interlaced: true }],
['jpegtran', { progressive: true }],
['optipng', { optimizationLevel: 5 }],
[
'svgo',
{
plugins: [
{
removeViewBox: false,
},
],
},
],
],
},
}),
);
} }
const includes = {}; const includes = {};
const _addAppFiles = (theme) => { const _addAppFiles = theme => {
const dirPath = path.resolve(__dirname, theme); const dirPath = path.resolve(__dirname, theme);
const themeName = path.basename(theme); const themeName = path.basename(theme);
@ -75,7 +107,7 @@ const _addAppFiles = (theme) => {
const dirPath = path.resolve(__dirname, dir); const dirPath = path.resolve(__dirname, dir);
let results = []; let results = [];
filesystem.readdirSync(dirPath).forEach((file) => { filesystem.readdirSync(dirPath).forEach(file => {
if (file.charAt(0) === '_') { if (file.charAt(0) === '_') {
return; return;
} }
@ -84,7 +116,9 @@ const _addAppFiles = (theme) => {
const stat = filesystem.statSync(filePath); const stat = filesystem.statSync(filePath);
if (stat && stat.isDirectory() && includeSubFolders) { if (stat && stat.isDirectory() && includeSubFolders) {
results = results.concat(_getAllFilesFromFolder(filePath, includeSubFolders)); results = results.concat(
_getAllFilesFromFolder(filePath, includeSubFolders),
);
} else { } else {
results.push(filePath); results.push(filePath);
} }
@ -97,7 +131,7 @@ const _addAppFiles = (theme) => {
const typesJSPath = path.join(theme, 'js/types'); const typesJSPath = path.join(theme, 'js/types');
if (filesystem.existsSync(typesJSPath)) { if (filesystem.existsSync(typesJSPath)) {
const pageScripts = _getAllFilesFromFolder(typesJSPath, true); const pageScripts = _getAllFilesFromFolder(typesJSPath, true);
pageScripts.forEach((file) => { pageScripts.forEach(file => {
includes[`app_${path.basename(file, '.js')}`] = file; includes[`app_${path.basename(file, '.js')}`] = file;
}); });
} }
@ -106,7 +140,7 @@ const _addAppFiles = (theme) => {
const typesSCSSPath = path.join(theme, 'scss/types'); const typesSCSSPath = path.join(theme, 'scss/types');
if (filesystem.existsSync(typesSCSSPath)) { if (filesystem.existsSync(typesSCSSPath)) {
const scssIncludes = _getAllFilesFromFolder(typesSCSSPath, true); const scssIncludes = _getAllFilesFromFolder(typesSCSSPath, true);
scssIncludes.forEach((file) => { scssIncludes.forEach(file => {
includes[`app_${path.basename(file, '.scss')}`] = file; includes[`app_${path.basename(file, '.scss')}`] = file;
}); });
} }
@ -126,15 +160,16 @@ module.exports = {
filename: path.join('js', '[name].js'), filename: path.join('js', '[name].js'),
publicPath: path.resolve(__dirname, 'dist'), publicPath: path.resolve(__dirname, 'dist'),
}, },
devtool: (COMPRESS ? '' : 'source-map'), devtool: COMPRESS ? '' : 'source-map',
externals: { externals: {
'jquery': 'jQuery', jquery: 'jQuery',
}, },
optimization: { optimization: {
namedModules: true, // NamedModulesPlugin() namedModules: true, // NamedModulesPlugin()
splitChunks: { // CommonsChunkPlugin() splitChunks: {
// CommonsChunkPlugin()
name: 'vendor', name: 'vendor',
minChunks: 2 minChunks: 2,
}, },
noEmitOnErrors: true, // NoEmitOnErrorsPlugin noEmitOnErrors: true, // NoEmitOnErrorsPlugin
concatenateModules: true, //ModuleConcatenationPlugin concatenateModules: true, //ModuleConcatenationPlugin
@ -151,94 +186,110 @@ module.exports = {
}, },
}, },
}), }),
] ],
}, },
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: [
['es2015', { [
'es2015',
{
modules: false, modules: false,
}], },
],
['stage-2'], ['stage-2'],
], ],
plugins: [ plugins: [['transform-react-jsx'], ['react-hot-loader/babel']],
['transform-react-jsx'],
['react-hot-loader/babel'],
],
}, },
}, },
}, { },
{
test: /\.tsx?$/, test: /\.tsx?$/,
use: 'ts-loader', use: 'ts-loader',
exclude: /node_modules/, exclude: /node_modules/,
}, { },
{
test: /\.coffee?$/, test: /\.coffee?$/,
use: 'coffee-loader', use: 'coffee-loader',
}, { },
{
test: /\.worker\.js$/, test: /\.worker\.js$/,
use: { use: {
loader: 'worker-loader', loader: 'worker-loader',
}, },
}, { },
{
test: /\.s?css$/, test: /\.s?css$/,
use: ExtractTextPlugin.extract({ use: ExtractTextPlugin.extract({
fallback: "style-loader", fallback: 'style-loader',
use: [{ use: [
{
loader: 'css-loader', loader: 'css-loader',
options: { options: {
sourceMap: !COMPRESS sourceMap: !COMPRESS,
} },
}, { },
{
loader: 'postcss-loader', loader: 'postcss-loader',
options: { options: {
sourceMap: !COMPRESS, sourceMap: !COMPRESS,
plugins: [ plugins: [autoprefixer()],
autoprefixer() },
] },
} {
}, { 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|svg|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)?)$/, test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
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: /\.(png|jpg|jpeg|gif|svg)$/, test: /\.(png|jpg|jpeg|gif|svg)$/,
loader: 'file-loader', loader: 'file-loader',
options: { options: {
name: '[name].[ext]', name: '[name].[ext]',
outputPath: 'img/', outputPath: 'img/',
publicPath: '../img/' publicPath: '../img/',
}, },
}, ], },
],
}, },
resolve: { resolve: {
modules: [ modules: [
@ -246,8 +297,8 @@ module.exports = {
path.resolve(__dirname, 'node_modules'), path.resolve(__dirname, 'node_modules'),
], ],
alias: { alias: {
'jquery': require.resolve('jquery'), jquery: require.resolve('jquery'),
'jQuery': require.resolve('jquery'), jQuery: require.resolve('jquery'),
}, },
}, },
plugins: plugins, plugins: plugins,
@ -266,10 +317,10 @@ module.exports = {
//watchContentBase: true, //watchContentBase: true,
overlay: { overlay: {
warnings: true, warnings: true,
errors: true errors: true,
}, },
headers: { headers: {
'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Origin': '*',
} },
}, },
}; };