const path = require( 'path' ); const glob = require( 'glob' ); const defaultConfig = require( "@wordpress/scripts/config/webpack.config" ); const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); const CssMinimizerPlugin = require( "css-minimizer-webpack-plugin" ); const { hasBabelConfig } = require( '@wordpress/scripts/utils' ); const TerserPlugin = require( 'terser-webpack-plugin' ); const SpriteLoaderPlugin = require( 'svg-sprite-loader/plugin' ); const UnminifiedWebpackPlugin = require( 'unminified-webpack-plugin' ); const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries'); const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'); const isProduction = process.env.NODE_ENV === 'production'; const mode = isProduction ? 'production' : 'development'; const BUILD_DIR = path.resolve( __dirname, 'assets' ); const filename = ext => isProduction ? ext + '/[name].min.' + ext : ext + '/[name].min.' + ext; module.exports = { ...defaultConfig, mode, devtool: ! isProduction ? 'source-map' : false, //devtool: ! isProduction ? false : false, entry: { main: path.resolve( process.cwd(), 'src/js', 'main.js' ), "reset-reactions-script": path.resolve( process.cwd(), 'src/js', 'reset-reactions.js' ), "search-live-script": path.resolve( process.cwd(), 'src/js', 'search-live.js' ), "toc-script": path.resolve( process.cwd(), 'src/js', 'toc-script.js' ), "global-style": path.resolve( process.cwd(), 'src/scss', 'global-style.scss' ), "post-single-style": path.resolve( process.cwd(), 'src/scss', 'post-single.scss' ), "reset-reactions-style": path.resolve( process.cwd(), 'src/scss', 'reset-reactions.scss' ), "search-live-style": path.resolve( process.cwd(), 'src/scss', 'search-live.scss' ), "toc-style": path.resolve( process.cwd(), 'src/scss', 'toc-style.scss' ), "featured-labels-menu": path.resolve( process.cwd(), 'src/scss', 'featured-labels-menu.scss' ), "editor-style": path.resolve( process.cwd(), 'src/scss', 'editor-style.scss' ), "sprite-svg": glob.sync( path.resolve( __dirname, 'src/icons/*.svg' ) ), }, output: { filename: filename( 'js' ), path: BUILD_DIR, clean: true }, optimization: { minimize: true, minimizer: [ new CssMinimizerPlugin( { minimizerOptions: { preset: [ "default", { "discardComments": { "removeAll": true } } ] }, } ), new TerserPlugin( { extractComments: false, } ), ] }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: [ require.resolve( 'thread-loader' ), { loader: require.resolve( 'babel-loader' ), options: { // Babel uses a directory within local node_modules // by default. Use the environment variable option // to enable more persistent caching. cacheDirectory: process.env.BABEL_CACHE_DIRECTORY || true, // Provide a fallback configuration if there's not // one explicitly available in the project. ...( ! hasBabelConfig() && { babelrc: false, configFile: false, presets: [ require.resolve( '@wordpress/babel-preset-default' ) ], } ), }, }, ], }, { test: /\.svg$/, include: path.resolve( __dirname, 'src/icons' ), use: [ { loader: 'svg-sprite-loader', options: { symbolId: filePath => { return 'icon-' + path .basename( filePath ) .replace( ".svg", "" ) .toLowerCase(); }, extract: true, spriteFilename: 'images/icons.svg', //publicPath: 'images' } }, 'svgo-loader' ] }, { test: /\.css$/i, use: [ "style-loader", "css-loader" ], }, { test: /\.s[ac]ss$/i, exclude: /node_modules/, use: [ { loader: MiniCssExtractPlugin.loader, }, { loader: 'css-loader', options: { sourceMap: ! isProduction, }, }, { loader: 'postcss-loader', options: { sourceMap: ! isProduction, }, }, { loader: 'sass-loader', options: { sourceMap: ! isProduction, }, }, ], }, { test: /\.(?:ico|gif|png|jpg|jpeg|svg)$/i, include: path.resolve( __dirname, 'src/images' ), exclude: path.resolve( __dirname, 'src/icons' ), type: 'asset/resource', generator: { filename: "images/[name][ext]", }, }, { test: /\.(woff|woff2|eot|ttf|otf|svg)$/i, include: path.resolve( __dirname, 'src/fonts' ), type: 'asset/resource', generator: { filename: "fonts/[name][ext]", }, }, ], }, plugins: [ new RemoveEmptyScriptsPlugin(), /*new FixStyleOnlyEntriesPlugin({ //extensions:['less', 'scss', 'css', 'styl','sass'], ignore:'css.js' }),*/ new MiniCssExtractPlugin( { filename: filename( 'css' ), } ), new SpriteLoaderPlugin( { plainSprite: true, } ), new UnminifiedWebpackPlugin({ exclude: /\/sprite-svg.js/ }) ], externals: { jquery: 'jQuery' } }