From e82bd3fbfb64cbe5489561a0f2866e47427f4e1f Mon Sep 17 00:00:00 2001 From: Ramon Wenger Date: Wed, 3 Mar 2021 11:40:53 +0100 Subject: [PATCH] Update build options --- client/build/utils.js | 134 +++++++++++++----------------- client/build/vue-loader.conf.js | 12 --- client/build/webpack.base.conf.js | 64 ++------------ client/build/webpack.dev.conf.js | 3 - client/src/pages/topic.vue | 2 +- client/src/styles/_toast.scss | 2 +- 6 files changed, 70 insertions(+), 147 deletions(-) diff --git a/client/build/utils.js b/client/build/utils.js index e534fb0f..6fe9105e 100644 --- a/client/build/utils.js +++ b/client/build/utils.js @@ -4,85 +4,62 @@ const config = require('../config') const ExtractTextPlugin = require('extract-text-webpack-plugin') const packageConfig = require('../package.json') -exports.assetsPath = function (_path) { - const assetsSubDirectory = process.env.NODE_ENV === 'production' - ? config.build.assetsSubDirectory - : config.dev.assetsSubDirectory +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 + : config.build.assetsSubDirectory return path.posix.join(assetsSubDirectory, _path) } -exports.cssLoaders = function (options) { - options = options || {} - - const cssLoader = { - loader: 'css-loader', - options: { - sourceMap: options.sourceMap - } - } - - const postcssLoader = { - loader: 'postcss-loader', - options: { - sourceMap: options.sourceMap - } - } - - // generate loader string to be used with extract text plugin - function generateLoaders (loader, loaderOptions) { - const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] - - if (loader) { - loaders.push({ - loader: loader + '-loader', - options: Object.assign({}, loaderOptions, { - sourceMap: options.sourceMap - }) - }) - } - - // Extract CSS when that option is specified - // (which is the case during production build) - if (options.extract) { - return ExtractTextPlugin.extract({ - use: loaders, - fallback: 'vue-style-loader' - }) - } else { - return ['vue-style-loader'].concat(loaders) - } - } - - // https://vue-loader.vuejs.org/en/configurations/extract-css.html - return { - css: generateLoaders(), - postcss: generateLoaders(), - less: generateLoaders('less'), - sass: generateLoaders('sass', { indentedSyntax: true }), - scss: generateLoaders('sass'), - stylus: generateLoaders('stylus'), - styl: generateLoaders('stylus') - } -} - -// Generate loaders for standalone style files (outside of .vue) -exports.styleLoaders = function (options) { - const output = [] - const loaders = exports.cssLoaders(options) - - for (const extension in loaders) { - const loader = loaders[extension] - output.push({ - test: new RegExp('\\.' + extension + '$'), - use: loader - }) - } - - return output -} - -exports.createNotifierCallback = () => { +const createNotifierCallback = () => { const notifier = require('node-notifier') return (severity, errors) => { @@ -99,3 +76,10 @@ exports.createNotifierCallback = () => { }) } } + +module.exports = { + styleRule, + isDev, + assetsPath, + createNotifierCallback +} diff --git a/client/build/vue-loader.conf.js b/client/build/vue-loader.conf.js index 9070bcf7..22135917 100644 --- a/client/build/vue-loader.conf.js +++ b/client/build/vue-loader.conf.js @@ -1,18 +1,6 @@ 'use strict' -const utils = require('./utils') const config = require('../config') -const isProduction = process.env.NODE_ENV === 'production' -const sourceMapEnabled = isProduction - ? config.build.productionSourceMap - : config.dev.cssSourceMap module.exports = { - // loaders: utils.cssLoaders({ - // sourceMap: sourceMapEnabled, - // todo: need that? - // extract: isProduction - // }), - // cssSourceMap: sourceMapEnabled, // cacheBusting: config.dev.cacheBusting, - } diff --git a/client/build/webpack.base.conf.js b/client/build/webpack.base.conf.js index fa8b0db2..016dbc25 100644 --- a/client/build/webpack.base.conf.js +++ b/client/build/webpack.base.conf.js @@ -1,53 +1,16 @@ 'use strict' const path = require('path') -const utils = require('./utils') const config = require('../config') -const vueLoaderConfig = require('./vue-loader.conf') const VueLoaderPlugin = require('vue-loader/lib/plugin') -const ExtractTextPlugin = require("extract-text-webpack-plugin") + +const {isDev, styleRule, assetsPath} = require('./utils'); function resolve(dir) { return path.join(__dirname, '..', dir) } -const styleRule = (scss) => { - const test = scss ? /\.scss$/ : /\.css$/; - let use; - if (scss) { - use = [ - 'css-loader', - { - loader: 'sass-loader', - options: { - data: process.env.THEME ? `@import "styles/themes/_${process.env.THEME}.scss";` : '' - } - } - ] - } else { - use = [ - 'css-loader' - ] - } - if (process.env.NODE_ENV === 'production') { - return { - test, - loader: ExtractTextPlugin.extract({ - use, - fallback: 'vue-style-loader' - }) - } - } else { - return { - test, - use: [ - 'vue-style-loader', - ...use - ] - } - } -} const createLintingRule = () => ({ test: /\.(js|vue)$/, @@ -60,7 +23,7 @@ const createLintingRule = () => ({ } }) -//todo on monday: mini-css-extract-plugin? +//todo: mini-css-extract-plugin? upgrade to webpack 4, then use this //https://github.com/webpack-contrib/mini-css-extract-plugin //todo: do we need postcss? module.exports = { @@ -71,9 +34,9 @@ module.exports = { output: { path: config.build.assetsRoot, filename: '[name].js', - publicPath: process.env.NODE_ENV === 'production' - ? config.build.assetsPublicPath - : config.dev.assetsPublicPath + publicPath: isDev + ? config.dev.assetsPublicPath + : config.build.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json', '.gql', '.graphql', '.scss'], @@ -115,7 +78,7 @@ module.exports = { loader: 'url-loader', options: { limit: 10000, - name: utils.assetsPath('img/[name].[hash:7].[ext]') + name: assetsPath('img/[name].[hash:7].[ext]') } }, { @@ -123,7 +86,7 @@ module.exports = { loader: 'url-loader', options: { limit: 10000, - name: utils.assetsPath('media/[name].[hash:7].[ext]') + name: assetsPath('media/[name].[hash:7].[ext]') } }, { @@ -131,19 +94,10 @@ module.exports = { loader: 'url-loader', options: { limit: 10000, - name: utils.assetsPath('fonts/[name].[hash:7].[ext]') + name: assetsPath('fonts/[name].[hash:7].[ext]') } }, styleRule(false), // css rule - // { - // test: /\.css$/, - // use: [ - // process.env.NODE_ENV !== 'production' - // ? 'vue-style-loader' - // : MiniCssExtractPlugin.loader, - // 'css-loader' - // ] - // }, styleRule(true) // sass rule ] }, diff --git a/client/build/webpack.dev.conf.js b/client/build/webpack.dev.conf.js index 8becf3a1..f0335602 100755 --- a/client/build/webpack.dev.conf.js +++ b/client/build/webpack.dev.conf.js @@ -14,9 +14,6 @@ const HOST = process.env.HOST const PORT = process.env.PORT && Number(process.env.PORT) const devWebpackConfig = merge(baseWebpackConfig, { - // module: { - // rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) - // }, // cheap-module-eval-source-map is faster for development devtool: config.dev.devtool, diff --git a/client/src/pages/topic.vue b/client/src/pages/topic.vue index 125f2fbd..a48f1dfc 100644 --- a/client/src/pages/topic.vue +++ b/client/src/pages/topic.vue @@ -70,7 +70,7 @@ update(data) { return this.$getRidOfEdges(data).topic || {}; }, - result(r, key) { + result() { if (this.saveMe) { this.saveMe = false; this.updateLastVisitedTopic(this.topic.id); diff --git a/client/src/styles/_toast.scss b/client/src/styles/_toast.scss index 88fcd8ca..b756cdd3 100644 --- a/client/src/styles/_toast.scss +++ b/client/src/styles/_toast.scss @@ -1,4 +1,4 @@ -@import '~vue-toast-notification/dist/theme-default.css'; +@import 'vue-toast-notification/dist/theme-default.css'; .toast .toast-text { color: $color-white;