From 8df8f2fe595409139e6998b955eba266781fc7c4 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Thu, 19 Nov 2020 16:22:43 -0300 Subject: [PATCH] Splits webpack config into three separete files. Changes build script for production and development. --- build.sh | 23 ++++++- package-lock.json | 16 +++++ package.json | 6 +- webpack.config.js => webpack.common.js | 90 +------------------------- webpack.dev.js | 23 +++++++ webpack.prod.js | 43 ++++++++++++ 6 files changed, 107 insertions(+), 94 deletions(-) rename webpack.config.js => webpack.common.js (62%) create mode 100644 webpack.dev.js create mode 100644 webpack.prod.js diff --git a/build.sh b/build.sh index afeaf73de..c69420942 100755 --- a/build.sh +++ b/build.sh @@ -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=$(", "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" } } diff --git a/webpack.config.js b/webpack.common.js similarity index 62% rename from webpack.config.js rename to webpack.common.js index 7fefa652b..994c406a3 100644 --- a/webpack.config.js +++ b/webpack.common.js @@ -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' - } - } -} \ No newline at end of file +}; \ No newline at end of file diff --git a/webpack.dev.js b/webpack.dev.js new file mode 100644 index 000000000..7a4133c19 --- /dev/null +++ b/webpack.dev.js @@ -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' + } + } +}); diff --git a/webpack.prod.js b/webpack.prod.js new file mode 100644 index 000000000..4990abcea --- /dev/null +++ b/webpack.prod.js @@ -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' + } + } +});