-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Simplify and cleanup webpack config (#535)
- Loading branch information
1 parent
6845ea8
commit ab15494
Showing
5 changed files
with
47 additions
and
245 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,137 +1,52 @@ | ||
| /* eslint-disable import/no-extraneous-dependencies, @wordpress/dependency-group */ | ||
|
|
||
| /** | ||
| * External dependencies | ||
| */ | ||
| const MiniCSSExtractPlugin = require('mini-css-extract-plugin'); | ||
| const path = require('path'); | ||
| const BrowserSyncPlugin = require('browser-sync-v3-webpack-plugin'); | ||
| const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'); | ||
| const webpack = require('webpack'); | ||
| require('dotenv').config(); | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin'); | ||
| const defaultConfig = require('./node_modules/@wordpress/scripts/config/webpack.config'); | ||
| const { getWebpackEntryPoints } = require('@wordpress/scripts/utils/config'); | ||
| const scriptConfig = require('@wordpress/scripts/config/webpack.config'); | ||
|
|
||
| /** | ||
| * Patches config to use resolve-url-loader for relative paths in SCSS files | ||
| * It will be possible to use './images/png.png' inside the SCSS, | ||
| * | ||
| * All paths will be treated as relative to file, not project root. | ||
| */ | ||
| for (const rule of defaultConfig.module.rules) { | ||
| if ('any-filename-to-test.scss'.match(rule.test)) { | ||
| const sassLoaderConfig = rule.use.pop(); | ||
| module.exports = { | ||
| ...scriptConfig, | ||
| plugins: [ | ||
| ...scriptConfig.plugins.filter( | ||
| (plugin) => | ||
| ![ | ||
| 'DependencyExtractionWebpackPlugin', | ||
| 'BrowserSyncPlugin', | ||
| ].includes(plugin.constructor.name), | ||
| ), | ||
| new DependencyExtractionWebpackPlugin({ | ||
| injectPolyfill: true, | ||
| requestToHandle(request) { | ||
| if (request.startsWith('@t2/')) { | ||
| return `t2-${request.substring(4)}`; | ||
| } | ||
|
|
||
| return undefined; | ||
| }, | ||
| requestToExternal(request) { | ||
| if (request.startsWith('@t2/')) { | ||
| return ['t2', request.substring(4)]; | ||
| } | ||
|
|
||
| // We mutate default config to change behaviour. | ||
| rule.use = [ | ||
| ...rule.use, | ||
| // resolve-url-loader should be executed right after sass-loader. | ||
| { | ||
| loader: require.resolve('resolve-url-loader'), | ||
| options: { | ||
| sourceMap: sassLoaderConfig.options.sourceMap, | ||
| removeCR: true, | ||
| }, | ||
| return undefined; | ||
| }, | ||
| }), | ||
| new BrowserSyncPlugin( | ||
| { | ||
| ...sassLoaderConfig, | ||
| options: { | ||
| ...sassLoaderConfig.options, | ||
| sourceMap: true, // It's required to have sourceMap for resolve-url-loader, resolve-url-loader will keep or drop maps on it's step. | ||
| }, | ||
| files: ['packages/**/*.css', 'packages/**/*.js'], | ||
| proxy: process.env.BROWSER_SYNC_PROXY ?? process.env.WP_HOME, | ||
| port: process.env.BROWSER_SYNC_PORT ?? 3002, | ||
| https: 'true' === process.env.BROWSER_SYNC_HTTPS, | ||
| }, | ||
| ]; | ||
| } | ||
| } | ||
|
|
||
| const config = { | ||
| ...defaultConfig, | ||
| entry: getWebpackEntryPoints(), | ||
| optimization: { | ||
| ...defaultConfig.optimization, | ||
| removeEmptyChunks: true, | ||
|
|
||
| splitChunks: { | ||
| cacheGroups: { | ||
| internalStyle: { | ||
| type: 'css/mini-extract', | ||
| test: /[\\/]+?\.(sc|sa|c)ss$/, | ||
| chunks: 'all', | ||
| enforce: true, | ||
| }, | ||
| default: false, | ||
| { | ||
| reload: false, | ||
| }, | ||
| }, | ||
| }, | ||
| resolve: { | ||
| ...defaultConfig.resolve, | ||
| alias: { | ||
| ...defaultConfig.resolve.alias, | ||
| components: path.resolve(__dirname, 'packages', 'components'), | ||
| }, | ||
| }, | ||
|
|
||
| // Hides rarely used information for more compact appearance of console. | ||
| stats: { | ||
| children: false, | ||
| all: false, | ||
| entrypoints: true, | ||
| warnings: true, | ||
| errors: true, | ||
| hash: false, | ||
| timings: true, | ||
| errorDetails: true, | ||
| builtAt: true, | ||
| }, | ||
|
|
||
| plugins: [ | ||
| new MiniCSSExtractPlugin({ filename: '[name].css' }), | ||
|
|
||
| /** | ||
| * It removes empty JS files, when we use CSS/SCSS as main entrypoint of asset. | ||
| * | ||
| * It's possible to remove also `.asset.php` by writing custom version | ||
| */ | ||
| new RemoveEmptyScriptsPlugin(), | ||
|
|
||
| new DependencyExtractionWebpackPlugin({ injectPolyfill: true }), | ||
|
|
||
| (process.argv || []).includes('--progress') && | ||
| new webpack.ProgressPlugin(), | ||
| ].filter(Boolean), | ||
| ), | ||
| ], | ||
| }; | ||
|
|
||
| if ('true' === process.env.BROWSER_SYNC_ENABLE) { | ||
| const browserSyncConfig = { | ||
| ...defaultConfig, | ||
| name: 'BrowserSync', | ||
| plugins: [ | ||
| new BrowserSyncPlugin( | ||
| { | ||
| files: ['packages/**/*.css', 'packages/**/*.js'], | ||
| proxy: | ||
| process.env.BROWSER_SYNC_PROXY ?? process.env.WP_HOME, | ||
| port: process.env.BROWSER_SYNC_PORT ?? 3002, | ||
| https: 'true' === process.env.BROWSER_SYNC_HTTPS, | ||
| }, | ||
| { | ||
| reload: false, | ||
| }, | ||
| ), | ||
| ].filter(Boolean), | ||
| }; | ||
|
|
||
| config.push(browserSyncConfig); | ||
| } | ||
|
|
||
| /** | ||
| * We can use Multi-Config mode to build packages in 'sandboxed' mode and parallel. | ||
| * | ||
| * https://webpack.js.org/configuration/configuration-types/#exporting-multiple-configurations | ||
| */ | ||
| module.exports = config; |