From f2fec255c8697937a5b566adffa24d8e892a12ec Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Thu, 16 Dec 2021 14:10:42 +0100 Subject: [PATCH] Update webpack configs --- client/build/utils.js | 47 --------- client/build/webpack.base.conf.js | 21 +++- client/build/webpack.dev.conf.js | 6 +- client/build/webpack.prod.conf.js | 97 ++++++++++--------- client/config/index.js | 2 +- client/src/mixins/notification.js | 11 --- client/src/styles/_toast.scss | 6 -- .../templates/wagtailadmin/admin_base.html | 7 -- server/core/templates/wagtailadmin/home.html | 3 - 9 files changed, 73 insertions(+), 127 deletions(-) delete mode 100644 client/src/mixins/notification.js delete mode 100644 client/src/styles/_toast.scss delete mode 100644 server/core/templates/wagtailadmin/admin_base.html delete mode 100644 server/core/templates/wagtailadmin/home.html diff --git a/client/build/utils.js b/client/build/utils.js index 6fe9105e..79617794 100644 --- a/client/build/utils.js +++ b/client/build/utils.js @@ -1,56 +1,10 @@ 'use strict' const path = require('path') const config = require('../config') -const ExtractTextPlugin = require('extract-text-webpack-plugin') const packageConfig = require('../package.json') const isDev = process.env.NODE_ENV !== 'production'; -const styleRule = (scss) => { - const test = scss ? /\.scss$/ : /\.css$/; - let use = [ - { - loader: 'css-loader', - // options: {importLoaders: scss ? 3 : 2} - options: { - sourceMap: isDev, - importLoaders: scss ? 2 : 1 - } - }, - 'postcss-loader' - ]; - if (scss) { - use = [ - ...use, - { - loader: 'sass-loader', - options: { - data: process.env.THEME ? `@import "styles/themes/_${process.env.THEME}.scss";` : '', - sourceMap: isDev - } - } - ] - } - - if (!isDev) { - return { - test, - loader: ExtractTextPlugin.extract({ - use, - fallback: 'vue-style-loader' - }) - } - } else { - return { - test, - use: [ - 'vue-style-loader', - ...use - ] - } - } -} - const assetsPath = (_path) => { const assetsSubDirectory = isDev ? config.dev.assetsSubDirectory @@ -78,7 +32,6 @@ const createNotifierCallback = () => { } module.exports = { - styleRule, isDev, assetsPath, createNotifierCallback diff --git a/client/build/webpack.base.conf.js b/client/build/webpack.base.conf.js index cde5f82a..e95cca61 100644 --- a/client/build/webpack.base.conf.js +++ b/client/build/webpack.base.conf.js @@ -1,10 +1,11 @@ 'use strict'; const path = require('path'); const config = require('../config'); +var MiniCssExtractPlugin = require('mini-css-extract-plugin') const {VueLoaderPlugin} = require('vue-loader'); -const {isDev, styleRule, assetsPath} = require('./utils'); +const {isDev, assetsPath} = require('./utils'); function resolve(dir) { return path.join(__dirname, '..', dir); @@ -37,6 +38,11 @@ module.exports = { ? config.dev.assetsPublicPath : config.build.assetsPublicPath, }, + optimization: { + splitChunks: { + chunks: 'all' + } + }, resolve: { extensions: ['.js', '.vue', '.json', '.gql', '.graphql', '.scss'], alias: { @@ -121,8 +127,17 @@ module.exports = { name: assetsPath('fonts/[name].[hash:7].[ext]'), }, }, - styleRule(false), // css rule - styleRule(true), // sass rule + { + test: /\.s?css$/, + use: [ + isDev ? 'vue-style-loader' : MiniCssExtractPlugin.loader, + 'css-loader', + 'postcss-loader', + 'sass-loader' + ] + } + // styleRule(false), // css rule + // styleRule(true), // sass rule ], }, plugins: [ diff --git a/client/build/webpack.dev.conf.js b/client/build/webpack.dev.conf.js index a55629c0..c9fdc929 100755 --- a/client/build/webpack.dev.conf.js +++ b/client/build/webpack.dev.conf.js @@ -20,7 +20,7 @@ const devWebpackConfig = merge(baseWebpackConfig, { devServer: { client: { logging: 'warn', - overlay: config.dev.errorOverlay, + overlay: config.dev.errorOverlay ? {errors: true, warnings: false} : false, progress: true, }, @@ -42,13 +42,15 @@ const devWebpackConfig = merge(baseWebpackConfig, { plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env'), + // bundler feature flags https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags + __VUE_OPTIONS_API__: true, // default, but explicit + __VUE_PROD_DEVTOOLS__: false, // default, but explicit }), new webpack.HotModuleReplacementPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', - inject: true, ...require('../config/dev.env'), }), // copy custom static assets diff --git a/client/build/webpack.prod.conf.js b/client/build/webpack.prod.conf.js index 0a4bbad1..8dad0dca 100644 --- a/client/build/webpack.prod.conf.js +++ b/client/build/webpack.prod.conf.js @@ -1,16 +1,16 @@ -'use strict' -const path = require('path') -const utils = require('./utils') -const webpack = require('webpack') -const config = require('../config') -const merge = require('webpack-merge') -const baseWebpackConfig = require('./webpack.base.conf') -const CopyWebpackPlugin = require('copy-webpack-plugin') -const HtmlWebpackPlugin = require('html-webpack-plugin') -const ExtractTextPlugin = require('extract-text-webpack-plugin') -const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') +'use strict'; +const path = require('path'); +const utils = require('./utils'); +const webpack = require('webpack'); +const config = require('../config'); +const {merge} = require('webpack-merge'); +const baseWebpackConfig = require('./webpack.base.conf'); +const CopyWebpackPlugin = require('copy-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); +const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin'); -const env = require('../config/prod.env') +const env = require('../config/prod.env'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const webpackConfig = merge(baseWebpackConfig, { devtool: config.build.productionSourceMap ? config.build.devtool : false, @@ -18,28 +18,26 @@ const webpackConfig = merge(baseWebpackConfig, { output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), - chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') + chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'), }, plugins: [ // http://vuejs.github.io/vue-loader/en/workflow/production.html new webpack.DefinePlugin({ - 'process.env': env + 'process.env': env, + // bundler feature flags https://github.com/vuejs/vue-next/tree/master/packages/vue#bundler-build-feature-flags + __VUE_OPTIONS_API__: true, // default, but explicit + __VUE_PROD_DEVTOOLS__: false, // default, but explicit }), // extract css into its own file - new ExtractTextPlugin({ + new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css'), - // Setting the following option to `false` will not extract CSS from codesplit chunks. - // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. - // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, - // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 - allChunks: true, }), // Compress extracted CSS. We are using this plugin so that possible // duplicated CSS from different components can be deduped. new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap - ? { safe: true, map: { inline: false } } - : { safe: true } + ? {safe: true, map: {inline: false}} + : {safe: true}, }), // generate dist index.html with correct asset hash for caching. // you can customize output by editing /index.html @@ -47,20 +45,21 @@ const webpackConfig = merge(baseWebpackConfig, { new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', - inject: true, ...require('../config/prod.env'), - minify: { - removeComments: true, + minify: { // defaults from https://github.com/jantimon/html-webpack-plugin#minification collapseWhitespace: true, - removeAttributeQuotes: true - // more options: - // https://github.com/kangax/html-minifier#options-quick-reference + keepClosingSlash: true, + removeComments: true, + removeRedundantAttributes: true, + removeScriptTypeAttributes: true, + removeStyleLinkTypeAttributes: true, + useShortDoctype: true, }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin - chunksSortMode: 'dependency' + chunksSortMode: 'auto', }), // keep module.id stable when vendor modules does not change - new webpack.HashedModuleIdsPlugin(), + new webpack.ids.HashedModuleIdsPlugin(), // split vendor js into its own file // todo: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693 // todo: do we need this? probably default is fine @@ -94,18 +93,22 @@ const webpackConfig = merge(baseWebpackConfig, { // }), // copy custom static assets - new CopyWebpackPlugin([ - { - from: path.resolve(__dirname, '../static'), - to: config.build.assetsSubDirectory, - ignore: ['.*'] - } - ]) - ] -}) + new CopyWebpackPlugin({ + patterns: [ + { + from: path.resolve(__dirname, '../static'), + to: config.build.assetsSubDirectory, + globOptions: { + ignore: ['.*'], + }, + }, + ], + }), + ], +}); if (config.build.productionGzip) { - const CompressionWebpackPlugin = require('compression-webpack-plugin') + const CompressionWebpackPlugin = require('compression-webpack-plugin'); webpackConfig.plugins.push( new CompressionWebpackPlugin({ @@ -114,17 +117,17 @@ if (config.build.productionGzip) { test: new RegExp( '\\.(' + config.build.productionGzipExtensions.join('|') + - ')$' + ')$', ), threshold: 10240, - minRatio: 0.8 - }) - ) + minRatio: 0.8, + }), + ); } if (config.build.bundleAnalyzerReport) { - const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin - webpackConfig.plugins.push(new BundleAnalyzerPlugin()) + const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; + webpackConfig.plugins.push(new BundleAnalyzerPlugin()); } -module.exports = webpackConfig +module.exports = webpackConfig; diff --git a/client/config/index.js b/client/config/index.js index 045db142..313916d2 100644 --- a/client/config/index.js +++ b/client/config/index.js @@ -58,7 +58,7 @@ module.exports = { productionSourceMap: true, // https://webpack.js.org/configuration/devtool/#production - devtool: '#source-map', + devtool: 'source-map', // Gzip off by default as many popular static hosts such as // Surge or Netlify already gzip all static assets for you. diff --git a/client/src/mixins/notification.js b/client/src/mixins/notification.js deleted file mode 100644 index 5bb925c1..00000000 --- a/client/src/mixins/notification.js +++ /dev/null @@ -1,11 +0,0 @@ -export default { - methods: { - error() { - this.$toast.open({ - message: 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später noch einmal.', - type: 'error', - duration: 3000 - }); - } - } -}; diff --git a/client/src/styles/_toast.scss b/client/src/styles/_toast.scss deleted file mode 100644 index b756cdd3..00000000 --- a/client/src/styles/_toast.scss +++ /dev/null @@ -1,6 +0,0 @@ -@import 'vue-toast-notification/dist/theme-default.css'; - -.toast .toast-text { - color: $color-white; - font-family: $sans-serif-font-family; -} diff --git a/server/core/templates/wagtailadmin/admin_base.html b/server/core/templates/wagtailadmin/admin_base.html deleted file mode 100644 index f90b434a..00000000 --- a/server/core/templates/wagtailadmin/admin_base.html +++ /dev/null @@ -1,7 +0,0 @@ -{% extends "wagtailadmin/admin_base.html" %} -{% load staticfiles %} - -{% block extra_css %} - -{% endblock %} \ No newline at end of file diff --git a/server/core/templates/wagtailadmin/home.html b/server/core/templates/wagtailadmin/home.html deleted file mode 100644 index 99baa849..00000000 --- a/server/core/templates/wagtailadmin/home.html +++ /dev/null @@ -1,3 +0,0 @@ -{% extends "wagtailadmin/home.html" %} - -{% block branding_welcome %}{% endblock %} \ No newline at end of file