diff options
Diffstat (limited to 'config')
| -rw-r--r-- | config/paths.js | 15 | ||||
| -rw-r--r-- | config/webpack.common.js | 99 | ||||
| -rw-r--r-- | config/webpack.dev.js | 91 | ||||
| -rw-r--r-- | config/webpack.prod.js | 45 |
4 files changed, 250 insertions, 0 deletions
diff --git a/config/paths.js b/config/paths.js new file mode 100644 index 0000000..48d2bf4 --- /dev/null +++ b/config/paths.js @@ -0,0 +1,15 @@ +const path = require('path'); + +const devFolder = path.resolve(__dirname, '../htdocs/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.common.js b/config/webpack.common.js new file mode 100644 index 0000000..84515bb --- /dev/null +++ b/config/webpack.common.js @@ -0,0 +1,99 @@ +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: { + 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 new file mode 100644 index 0000000..4ac420c --- /dev/null +++ b/config/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.prod.js b/config/webpack.prod.js new file mode 100644 index 0000000..f97fd65 --- /dev/null +++ b/config/webpack.prod.js @@ -0,0 +1,45 @@ +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, + }, + '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()], +}; |