Splits webpack config into three separete files. Changes build script for production and development.

This commit is contained in:
mateuswetah 2020-11-19 16:22:43 -03:00
parent e70e972a95
commit 8df8f2fe59
6 changed files with 107 additions and 94 deletions

View File

@ -12,12 +12,12 @@ current_OS=`uname`
# For macOS (Darwin)
if [ $current_OS == "Darwin" ]; then
find src ./webpack.config.js -type f \( -name "*.js" -or -name "*.vue" -or -name "webpack.config.js" \) -exec md5 {} \; | sort -k 2 | md5 > last-js-build.md5
find src *.js -type f \( -name "*.js" -or -name "*.vue" -or -name "webpack.common.js" -or -name "webpack.dev.js" -or -name "webpack.prod.js" \) -exec md5 {} \; | sort -k 2 | md5 > last-js-build.md5
find ./src/views/admin/scss/ ./src/views/gutenberg-blocks/ ./src/views/gutenberg-blocks/tainacan-collections/collections-list ./src/views/gutenberg-blocks/tainacan-facets/facets-list ./src/views/gutenberg-blocks/tainacan-items/dynamic-items-list ./src/views/gutenberg-blocks/tainacan-items/items-list ./src/views/gutenberg-blocks/tainacan-terms/terms-list -type f \( -name "*.scss" \) -exec md5 {} \; | sort -k 2 | md5 > last-sass-build.md5
find ./composer.json -type f \( -name "composer.json" \) -exec md5 {} \; | sort -k 2 | md5 > last-composer-build.md5
find ./package.json -type f \( -name "package.json" -or -name "package-lock.json" \) -exec md5 {} \; | sort -k 2 | md5 > last-package-build.md5
else
find src ./webpack.config.js -type f \( -name "*.js" -or -name "*.vue" -or -name "webpack.config.js" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-js-build.md5
find src *.js -type f \( -name "*.js" -or -name "*.vue" -or -name "webpack.common.js" -or -name "webpack.dev.js" -or -name "webpack.prod.js" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-js-build.md5
find ./src/views/admin/scss/ ./src/views/gutenberg-blocks ./src/views/gutenberg-blocks/tainacan-collections/collections-list ./src/views/gutenberg-blocks/tainacan-facets/facets-list ./src/views/gutenberg-blocks/tainacan-items/dynamic-items-list ./src/views/gutenberg-blocks/tainacan-items/items-list ./src/views/gutenberg-blocks/tainacan-terms/terms-list -type f \( -name "*.scss" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-sass-build.md5
find ./composer.json -type f \( -name "composer.json" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-composer-build.md5
find ./package.json -type f \( -name "package.json" -or -name "package-lock.json" \) -exec md5sum {} \; | sort -k 2 | md5sum > last-package-build.md5
@ -45,9 +45,26 @@ then
fi
new_md5_js=$(<last-js-build.md5)
if [ "$current_md5_js" != "$new_md5_js" ]
then
npm run build
is_prod_build=false
for i in "$@"
do
case $i in
--prod)
is_prod_build=true
echo "Building in production mode..."
npm run build-prod
;;
esac
done
if [ "$is_prod_build" == false ]
then
echo "Building in development mode..."
npm run build
fi
fi
### END npm build ###

16
package-lock.json generated
View File

@ -11785,6 +11785,16 @@
"uuid": "^3.3.2"
}
},
"webpack-merge": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.4.0.tgz",
"integrity": "sha512-/scBgu8LVPlHDgqH95Aw1xS+L+PHrpHKOwYVGFaNOQl4Q4wwwWDarwB1WdZAbLQ24SKhY3Awe7VZGYAdp+N+gQ==",
"dev": true,
"requires": {
"clone-deep": "^4.0.1",
"wildcard": "^2.0.0"
}
},
"webpack-sources": {
"version": "1.4.3",
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
@ -11839,6 +11849,12 @@
"string-width": "^1.0.2 || 2"
}
},
"wildcard": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.0.tgz",
"integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
"dev": true
},
"wordwrap": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",

View File

@ -4,7 +4,8 @@
"author": "Eduardo <eduardo.humberto1992@gmail.com>",
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=development webpack --display-error-details --mode development --progress --hide-modules"
"build": "cross-env NODE_ENV=development webpack --config webpack.dev.js --display-error-details --progress --hide-modules",
"build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --display-error-details --progress --hide-modules"
},
"dependencies": {
"axios": "^0.19.2",
@ -50,6 +51,7 @@
"webpack": "^4.43.0",
"webpack-bundle-analyzer": "^3.7.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.4.0"
}
}

View File

@ -1,7 +1,4 @@
let path = require('path');
let webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
entry: {
@ -96,7 +93,6 @@ module.exports = {
},
],
}
]
},
node: {
@ -106,89 +102,5 @@ module.exports = {
},
performance: {
hints: false
},
};
// Change to true for production mode
const production = false;
if (production === true) {
process.env.NODE_ENV = 'production';
const TerserPlugin = require('terser-webpack-plugin');
console.log(`Production: ${production}`);
module.exports.mode = 'production';
module.exports.devtool = undefined;
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new VueLoaderPlugin(),
]);
module.exports.resolve = {
alias: {
'vue$': 'vue/dist/vue.min',
'Swiper$': 'swiper/js/swiper.min.js'
}
}
module.exports.optimization = {
sideEffects: true,
minimize: true,
minimizer: [
new TerserPlugin({
parallel: true,
sourceMap: false,
cache: true,
terserOptions: {
// We preserve function names that start with capital letters as
// they're _likely_ component names, and these are useful to have
// in tracebacks and error messages.
keep_fnames: /__|_x|_n|_nx/,
mangle: {
keep_fnames: /__|_x|_n|_nx/,
},
output: {
comments: /translators:/i,
},
},
extractComments: false,
})
],
};
} else {
console.log(`Production: ${production}`);
module.exports.devtool = '';
module.exports.plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
},
}),
new VueLoaderPlugin(),
new BundleAnalyzerPlugin({
openAnalyzer: false,
analyzerMode: 'static'
})
];
module.exports.resolve = {
alias: {
//'vue$': 'vue/dist/vue.esm' // uncomment this and comment the above to use vue dev tools (can cause type error)
'vue$': 'vue/dist/vue.min',
'Swiper$': 'swiper/js/swiper.min.js'
}
}
}
};

23
webpack.dev.js Normal file
View File

@ -0,0 +1,23 @@
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
plugins: [
new VueLoaderPlugin(),
new BundleAnalyzerPlugin({
openAnalyzer: false,
analyzerMode: 'static'
})
],
resolve: {
alias: {
//'vue$': 'vue/dist/vue.esm' // uncomment this and comment the above to use vue dev tools (can cause type error)
'vue$': 'vue/dist/vue.min',
'Swiper$': 'swiper/js/swiper.min.js'
}
}
});

43
webpack.prod.js Normal file
View File

@ -0,0 +1,43 @@
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
devtool: undefined,
plugins: [
// new webpack.LoaderOptionsPlugin({
// minimize: true
// }),
new VueLoaderPlugin(),
],
optimization: {
minimizer: [
new TerserPlugin({
parallel: true,
sourceMap: false,
cache: true,
terserOptions: {
// We preserve function names that start with capital letters as
// they're _likely_ component names, and these are useful to have
// in tracebacks and error messages.
keep_fnames: /__|_x|_n|_nx/,
mangle: {
keep_fnames: /__|_x|_n|_nx/,
},
output: {
comments: /translators:/i,
},
},
extractComments: false,
}),
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.min',
'Swiper$': 'swiper/js/swiper.min.js'
}
}
});