ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Update webpack configs

This commit is contained in:
Ramon Wenger 2021-12-16 14:10:42 +01:00
parent bdb06be67c
commit f2fec255c8
9 changed files with 73 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
client/build/utils.js
View File

@ -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

21
client/build/webpack.base.conf.js
View File

@ -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: [

6
client/build/webpack.dev.conf.js
View File

@ -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

89
client/build/webpack.prod.conf.js
View File

@ -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},
}),
// 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([
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
})
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;

2
client/config/index.js
View File

@ -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.

11
client/src/mixins/notification.js
View File

@ -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
});
}
}
};

6
client/src/styles/_toast.scss
View File

@ -1,6 +0,0 @@
@import 'vue-toast-notification/dist/theme-default.css';
.toast .toast-text {
color: $color-white;
font-family: $sans-serif-font-family;
}

7
server/core/templates/wagtailadmin/admin_base.html
View File

@ -1,7 +0,0 @@
{% extends "wagtailadmin/admin_base.html" %}
{% load staticfiles %}
{% block extra_css %}
<style>
</style>
{% endblock %}

3
server/core/templates/wagtailadmin/home.html
View File

@ -1,3 +0,0 @@
{% extends "wagtailadmin/home.html" %}
{% block branding_welcome %}{% endblock %}