From 815b190d28cc42e6f3d44d04e1f1ebaea9208cf6 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sat, 30 Oct 2021 22:44:55 +0200 Subject: chore: convert html files to php Now I can use php to determine current env and load static CSS file if it is prod. --- config/dotenv.php | 20 ++++++++ config/paths.js | 15 ------ config/webpack.common.js | 102 --------------------------------------- config/webpack.dev.js | 91 ---------------------------------- config/webpack.prod.js | 48 ------------------ config/webpack/paths.js | 15 ++++++ config/webpack/webpack.common.js | 102 +++++++++++++++++++++++++++++++++++++++ config/webpack/webpack.dev.js | 91 ++++++++++++++++++++++++++++++++++ config/webpack/webpack.prod.js | 48 ++++++++++++++++++ 9 files changed, 276 insertions(+), 256 deletions(-) create mode 100644 config/dotenv.php delete mode 100644 config/paths.js delete mode 100644 config/webpack.common.js delete mode 100644 config/webpack.dev.js delete mode 100644 config/webpack.prod.js create mode 100644 config/webpack/paths.js create mode 100644 config/webpack/webpack.common.js create mode 100644 config/webpack/webpack.dev.js create mode 100644 config/webpack/webpack.prod.js (limited to 'config') diff --git a/config/dotenv.php b/config/dotenv.php new file mode 100644 index 0000000..16d31af --- /dev/null +++ b/config/dotenv.php @@ -0,0 +1,20 @@ +safeLoad(); + $current_env = $_ENV['CURRENT_ENV']; + return $current_env; + } else { + return ''; + } +} diff --git a/config/paths.js b/config/paths.js deleted file mode 100644 index 8b67206..0000000 --- a/config/paths.js +++ /dev/null @@ -1,15 +0,0 @@ -const path = require('path'); - -const devFolder = path.resolve(__dirname, '../src/'); - -module.exports = { - src: { - fonts: path.resolve(devFolder, './fonts/'), - images: path.resolve(devFolder, './images/'), - scripts: path.resolve(devFolder, './js/app.js'), - style: path.resolve(devFolder, './scss/style.scss'), - }, - dist: path.resolve(devFolder, '../assets/'), - files: [path.resolve(devFolder, '../**/*.html')], - sassPaths: [path.resolve(devFolder, '../node_modules/modern-normalize/')], -}; diff --git a/config/webpack.common.js b/config/webpack.common.js deleted file mode 100644 index 69ecd2f..0000000 --- a/config/webpack.common.js +++ /dev/null @@ -1,102 +0,0 @@ -const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin'); -const CopyPlugin = require('copy-webpack-plugin'); -const paths = require('./paths'); - -module.exports = { - entry: { - style: { - import: paths.src.style, - filename: 'js/style.js', - }, - scripts: { - import: paths.src.scripts, - filename: 'js/app.js', - }, - }, - output: { - path: paths.dist, - clean: true, - hotUpdateChunkFilename: 'hmr/[id].[fullhash].hot-update.js', - hotUpdateMainFilename: 'hmr/[runtime].[fullhash].hot-update.json', - }, - module: { - rules: [ - { - test: /\.m?js$/, - exclude: /node_modules/, - use: ['babel-loader'], - }, - { - test: /\.(png|jpe?g|gif|svg)$/i, - type: 'asset/resource', - generator: { - filename: (img) => { - const relativePath = img.filename; - const filteredPath = relativePath.replace('src/', ''); - return filteredPath; - }, - }, - }, - { - test: /\.(woff|woff2|eot|ttf|otf)$/i, - type: 'asset/resource', - generator: { - filename: (font) => { - const relativePath = font.filename; - const filteredPath = relativePath.replace('src/', ''); - return filteredPath; - }, - }, - }, - ], - }, - optimization: { - runtimeChunk: { - name: 'js/runtime', - }, - splitChunks: { - cacheGroups: { - style: { - type: 'css/mini-extract', - name: '/css/style', - chunks: (chunk) => chunk.name === 'style', - enforce: true, - }, - }, - }, - }, - plugins: [ - new ImageMinimizerPlugin({ - minimizerOptions: { - plugins: [ - ['gifsicle', { interlaced: true }], - ['mozjpeg', { progressive: true, quality: 75 }], - ['optipng', { optimizationLevel: 5 }], - [ - 'svgo', - { - plugins: [ - { - name: 'preset-default', - params: { - overrides: { - removeTitle: false, - removeViewBox: false, - }, - }, - }, - 'removeDimensions', - ], - }, - ], - ], - }, - }), - new CopyPlugin({ - patterns: [ - { from: paths.src.fonts, to: 'fonts', noErrorOnMissing: true }, - { from: paths.src.images, to: 'images', noErrorOnMissing: true }, - ], - }), - ], -}; diff --git a/config/webpack.dev.js b/config/webpack.dev.js deleted file mode 100644 index 4ac420c..0000000 --- a/config/webpack.dev.js +++ /dev/null @@ -1,91 +0,0 @@ -const dartSass = require('sass'); -const paths = require('./paths'); -require('dotenv').config(); - -const protocol = process.env.WEBPACK_PROTOCOL; -const host = process.env.WEBPACK_HOST; -const port = process.env.WEBPACK_PORT; -const siteURL = `${protocol}://${host}/`; -const isHttps = protocol === 'https'; -const isHMREnabled = process.env.WEBPACK_HOT_RELOAD === 'true'; -const isOpenBoolean = process.env.WEBPACK_OPEN === 'true' || process.env.WEBPACK_OPEN === 'false'; - -module.exports = { - mode: 'development', - module: { - rules: [ - { - test: /\.(sa|sc|c)ss$/i, - use: [ - 'style-loader', - { - loader: 'css-loader', - options: { - importLoaders: 2, - sourceMap: true, - }, - }, - { - loader: 'postcss-loader', - options: { - postcssOptions: { - plugins: ['autoprefixer'], - }, - sourceMap: true, - }, - }, - { - loader: 'sass-loader', - options: { - implementation: dartSass, - sassOptions: { - indentWidth: 2, - outputStyle: 'expanded', - includePaths: paths.sassPaths, - }, - sourceMap: true, - }, - }, - ], - }, - ], - }, - devServer: { - client: { - overlay: { - warnings: true, - errors: true, - }, - }, - devMiddleware: { - writeToDisk: true, - }, - host, - port, - hot: isHMREnabled, - https: !isHttps - ? false - : { - key: process.env.WEBPACK_HTTPS_KEY, - cert: process.env.WEBPACK_HTTPS_CERT, - }, - liveReload: true, - open: isOpenBoolean - ? process.env.WEBPACK_OPEN - : { - app: { - name: process.env.WEBPACK_OPEN, - }, - }, - proxy: { - '/': { - target: siteURL, - changeOrigin: true, - secure: false, - }, - }, - static: false, - watchFiles: paths.files, - }, - devtool: 'inline-source-map', -}; diff --git a/config/webpack.prod.js b/config/webpack.prod.js deleted file mode 100644 index a2778f5..0000000 --- a/config/webpack.prod.js +++ /dev/null @@ -1,48 +0,0 @@ -const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const dartSass = require('sass'); -const paths = require('./paths'); - -module.exports = { - mode: 'production', - devtool: false, - optimization: { - minimizer: [new CssMinimizerPlugin(), '...'], - }, - module: { - rules: [ - { - test: /\.(sa|sc|c)ss$/i, - use: [ - { - loader: MiniCssExtractPlugin.loader, - options: { - publicPath: '../', - }, - }, - 'css-loader', - { - loader: 'postcss-loader', - options: { - postcssOptions: { - plugins: ['autoprefixer'], - }, - }, - }, - { - loader: 'sass-loader', - options: { - implementation: dartSass, - sassOptions: { - indentWidth: 2, - outputStyle: 'compressed', - includePaths: paths.sassPaths, - }, - }, - }, - ], - }, - ], - }, - plugins: [new MiniCssExtractPlugin()], -}; diff --git a/config/webpack/paths.js b/config/webpack/paths.js new file mode 100644 index 0000000..fd4c73f --- /dev/null +++ b/config/webpack/paths.js @@ -0,0 +1,15 @@ +const path = require('path'); + +const devFolder = path.resolve(__dirname, '../../src/'); + +module.exports = { + src: { + fonts: path.resolve(devFolder, './fonts/'), + images: path.resolve(devFolder, './images/'), + scripts: path.resolve(devFolder, './js/app.js'), + style: path.resolve(devFolder, './scss/style.scss'), + }, + dist: path.resolve(devFolder, '../assets/'), + files: [path.resolve(devFolder, '../**/*.php')], + sassPaths: [path.resolve(devFolder, '../node_modules/modern-normalize/')], +}; diff --git a/config/webpack/webpack.common.js b/config/webpack/webpack.common.js new file mode 100644 index 0000000..69ecd2f --- /dev/null +++ b/config/webpack/webpack.common.js @@ -0,0 +1,102 @@ +const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin'); +const CopyPlugin = require('copy-webpack-plugin'); +const paths = require('./paths'); + +module.exports = { + entry: { + style: { + import: paths.src.style, + filename: 'js/style.js', + }, + scripts: { + import: paths.src.scripts, + filename: 'js/app.js', + }, + }, + output: { + path: paths.dist, + clean: true, + hotUpdateChunkFilename: 'hmr/[id].[fullhash].hot-update.js', + hotUpdateMainFilename: 'hmr/[runtime].[fullhash].hot-update.json', + }, + module: { + rules: [ + { + test: /\.m?js$/, + exclude: /node_modules/, + use: ['babel-loader'], + }, + { + test: /\.(png|jpe?g|gif|svg)$/i, + type: 'asset/resource', + generator: { + filename: (img) => { + const relativePath = img.filename; + const filteredPath = relativePath.replace('src/', ''); + return filteredPath; + }, + }, + }, + { + test: /\.(woff|woff2|eot|ttf|otf)$/i, + type: 'asset/resource', + generator: { + filename: (font) => { + const relativePath = font.filename; + const filteredPath = relativePath.replace('src/', ''); + return filteredPath; + }, + }, + }, + ], + }, + optimization: { + runtimeChunk: { + name: 'js/runtime', + }, + splitChunks: { + cacheGroups: { + style: { + type: 'css/mini-extract', + name: '/css/style', + chunks: (chunk) => chunk.name === 'style', + enforce: true, + }, + }, + }, + }, + plugins: [ + new ImageMinimizerPlugin({ + minimizerOptions: { + plugins: [ + ['gifsicle', { interlaced: true }], + ['mozjpeg', { progressive: true, quality: 75 }], + ['optipng', { optimizationLevel: 5 }], + [ + 'svgo', + { + plugins: [ + { + name: 'preset-default', + params: { + overrides: { + removeTitle: false, + removeViewBox: false, + }, + }, + }, + 'removeDimensions', + ], + }, + ], + ], + }, + }), + new CopyPlugin({ + patterns: [ + { from: paths.src.fonts, to: 'fonts', noErrorOnMissing: true }, + { from: paths.src.images, to: 'images', noErrorOnMissing: true }, + ], + }), + ], +}; diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js new file mode 100644 index 0000000..4ac420c --- /dev/null +++ b/config/webpack/webpack.dev.js @@ -0,0 +1,91 @@ +const dartSass = require('sass'); +const paths = require('./paths'); +require('dotenv').config(); + +const protocol = process.env.WEBPACK_PROTOCOL; +const host = process.env.WEBPACK_HOST; +const port = process.env.WEBPACK_PORT; +const siteURL = `${protocol}://${host}/`; +const isHttps = protocol === 'https'; +const isHMREnabled = process.env.WEBPACK_HOT_RELOAD === 'true'; +const isOpenBoolean = process.env.WEBPACK_OPEN === 'true' || process.env.WEBPACK_OPEN === 'false'; + +module.exports = { + mode: 'development', + module: { + rules: [ + { + test: /\.(sa|sc|c)ss$/i, + use: [ + 'style-loader', + { + loader: 'css-loader', + options: { + importLoaders: 2, + sourceMap: true, + }, + }, + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: ['autoprefixer'], + }, + sourceMap: true, + }, + }, + { + loader: 'sass-loader', + options: { + implementation: dartSass, + sassOptions: { + indentWidth: 2, + outputStyle: 'expanded', + includePaths: paths.sassPaths, + }, + sourceMap: true, + }, + }, + ], + }, + ], + }, + devServer: { + client: { + overlay: { + warnings: true, + errors: true, + }, + }, + devMiddleware: { + writeToDisk: true, + }, + host, + port, + hot: isHMREnabled, + https: !isHttps + ? false + : { + key: process.env.WEBPACK_HTTPS_KEY, + cert: process.env.WEBPACK_HTTPS_CERT, + }, + liveReload: true, + open: isOpenBoolean + ? process.env.WEBPACK_OPEN + : { + app: { + name: process.env.WEBPACK_OPEN, + }, + }, + proxy: { + '/': { + target: siteURL, + changeOrigin: true, + secure: false, + }, + }, + static: false, + watchFiles: paths.files, + }, + devtool: 'inline-source-map', +}; diff --git a/config/webpack/webpack.prod.js b/config/webpack/webpack.prod.js new file mode 100644 index 0000000..a2778f5 --- /dev/null +++ b/config/webpack/webpack.prod.js @@ -0,0 +1,48 @@ +const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const dartSass = require('sass'); +const paths = require('./paths'); + +module.exports = { + mode: 'production', + devtool: false, + optimization: { + minimizer: [new CssMinimizerPlugin(), '...'], + }, + module: { + rules: [ + { + test: /\.(sa|sc|c)ss$/i, + use: [ + { + loader: MiniCssExtractPlugin.loader, + options: { + publicPath: '../', + }, + }, + 'css-loader', + { + loader: 'postcss-loader', + options: { + postcssOptions: { + plugins: ['autoprefixer'], + }, + }, + }, + { + loader: 'sass-loader', + options: { + implementation: dartSass, + sassOptions: { + indentWidth: 2, + outputStyle: 'compressed', + includePaths: paths.sassPaths, + }, + }, + }, + ], + }, + ], + }, + plugins: [new MiniCssExtractPlugin()], +}; -- cgit v1.2.3