diff --git a/packages/scripts/config/webpack.config.js b/packages/scripts/config/webpack.config.js index 9a1daabf5d752e..7994d782d94e4d 100644 --- a/packages/scripts/config/webpack.config.js +++ b/packages/scripts/config/webpack.config.js @@ -4,6 +4,8 @@ const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' ); const LiveReloadPlugin = require( 'webpack-livereload-plugin' ); const path = require( 'path' ); +const postcssPresetEnv = require( 'postcss-preset-env' ); +const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); /** * Internal dependencies @@ -66,11 +68,14 @@ const externals = [ const isProduction = process.env.NODE_ENV === 'production'; const mode = isProduction ? 'production' : 'development'; -const getBabelLoaderOptions = () => hasBabelConfig() ? {} : { - babelrc: false, - configFile: false, - presets: [ require.resolve( '@wordpress/babel-preset-default' ) ], -}; +const getBabelLoaderOptions = () => + hasBabelConfig() ? + {} : + { + babelrc: false, + configFile: false, + presets: [ require.resolve( '@wordpress/babel-preset-default' ) ], + }; const config = { mode, @@ -87,6 +92,29 @@ const config = { 'lodash-es': 'lodash', }, }, + optimization: { + splitChunks: { + chunks: 'all', + cacheGroups: { + editor: { + name: 'editor', + test: /editor\.(sc|sa|c)ss$/, + enforce: true, + }, + style: { + name: 'styles', + test: /style\.(sc|sa|c)ss$/, + enforce: true, + }, + theme: { + name: 'theme', + test: /theme\.(sc|sa|c)ss$/, + enforce: true, + }, + default: false, + }, + }, + }, module: { rules: [ { @@ -102,15 +130,55 @@ const config = { options: getBabelLoaderOptions(), }, }, + { + test: /\.(sc|sa|c)ss$/, + use: [ + { + loader: MiniCssExtractPlugin.loader, + }, + { + loader: require.resolve( 'css-loader' ), + }, + { + loader: require.resolve( 'sass-loader' ), + }, + { + loader: require.resolve( 'postcss-loader' ), + options: { + ident: 'postcss', + plugins: () => [ + postcssPresetEnv( { + // Start with a stage. + stage: 3, + // Override specific features you do (or don't) want. + features: { + // And, optionally, configure rules/features as needed. + 'custom-media-queries': { + preserve: false, + }, + 'custom-properties': { + preserve: true, + }, + 'nesting-rules': true, + }, + } ), + ], + }, + }, + ], + }, ], }, plugins: [ // WP_BUNDLE_ANALYZER global variable enables utility that represents bundle content // as convenient interactive zoomable treemap. process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(), + // MiniCssExtractPlugin to extract the css thats gets imported into javascript + new MiniCssExtractPlugin(), // WP_LIVE_RELOAD_PORT global variable changes port on which live reload works // when running watch mode. - ! isProduction && new LiveReloadPlugin( { port: process.env.WP_LIVE_RELOAD_PORT || 35729 } ), + ! isProduction && + new LiveReloadPlugin( { port: process.env.WP_LIVE_RELOAD_PORT || 35729 } ), ].filter( Boolean ), stats: { children: false, diff --git a/packages/scripts/package.json b/packages/scripts/package.json index bbc3cb49f92975..783752fe83f358 100644 --- a/packages/scripts/package.json +++ b/packages/scripts/package.json @@ -40,13 +40,19 @@ "chalk": "^2.4.1", "check-node-version": "^3.1.1", "cross-spawn": "^5.1.0", + "css-loader": "^2.1.1", "eslint": "^5.12.1", "jest": "^24.1.0", "jest-puppeteer": "^4.0.0", + "mini-css-extract-plugin": "^0.6.0", + "node-sass": "^4.11.0", "npm-package-json-lint": "^3.6.0", + "postcss-loader": "^3.0.0", + "postcss-preset-env": "^6.6.0", "puppeteer": "1.6.1", "read-pkg-up": "^1.0.1", "resolve-bin": "^0.4.0", + "sass-loader": "^7.1.0", "source-map-loader": "^0.2.4", "stylelint": "^9.10.1", "stylelint-config-wordpress": "^13.1.0",