Update webpack 4 to webpack 5 (https://github.com/woocommerce/woocommerce-admin/pull/8476)
* updated webpack to 5 * fix dependency extraction config * port unminify.js to webpack 5 * updated packages webpack version * changelogs * Updated @wordpress/custom-templated-path-webpack-plugin - also removed Terser from package.json * Upgraded storybook config to webpack 5
This commit is contained in:
RJ
GitHub
parent
8277860a19
commit
d9714b55c3
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: Dev
|
||||
|
||||
Update webpack 4 to 5 #8476
|
||||
|
|
@ -146,7 +146,6 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@automattic/color-studio": "^2.5.0",
|
||||
"@automattic/mini-css-extract-plugin-with-rtl": "^0.8.0",
|
||||
"@babel/cli": "^7.17.6",
|
||||
"@babel/core": "^7.17.5",
|
||||
"@babel/plugin-proposal-class-properties": "^7.16.7",
|
||||
|
|
@ -168,8 +167,10 @@
|
|||
"@storybook/addon-viewport": "^6.4.19",
|
||||
"@storybook/addons": "^6.4.19",
|
||||
"@storybook/api": "^6.4.19",
|
||||
"@storybook/builder-webpack5": "^6.4.19",
|
||||
"@storybook/components": "^6.4.19",
|
||||
"@storybook/core-events": "^6.4.19",
|
||||
"@storybook/manager-webpack5": "^6.4.19",
|
||||
"@storybook/react": "^6.4.19",
|
||||
"@storybook/theming": "^6.4.19",
|
||||
"@testing-library/dom": "^8.11.3",
|
||||
|
|
@ -212,7 +213,7 @@
|
|||
"@wordpress/babel-plugin-makepot": "^2.1.3",
|
||||
"@wordpress/babel-preset-default": "^6.5.1",
|
||||
"@wordpress/browserslist-config": "^4.1.1",
|
||||
"@wordpress/custom-templated-path-webpack-plugin": "^1.7.0",
|
||||
"@wordpress/custom-templated-path-webpack-plugin": "^2.1.2",
|
||||
"@wordpress/e2e-test-utils": "^4.16.1",
|
||||
"@wordpress/eslint-plugin": "^8.0.2",
|
||||
"@wordpress/jest-preset-default": "^8.0.1",
|
||||
|
|
@ -230,9 +231,9 @@
|
|||
"comment-parser": "^1.3.0",
|
||||
"concurrently": "^5.3.0",
|
||||
"config": "^3.3.7",
|
||||
"copy-webpack-plugin": "^5.1.2",
|
||||
"copy-webpack-plugin": "^10.2.4",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^3.6.0",
|
||||
"css-loader": "^6.7.0",
|
||||
"docsify-cli": "^4.4.3",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-import-resolver-typescript": "^2.5.0",
|
||||
|
|
@ -251,6 +252,7 @@
|
|||
"lint-staged": "^10.5.4",
|
||||
"md5": "^2.3.0",
|
||||
"merge-config": "^2.0.0",
|
||||
"mini-css-extract-plugin": "^2.6.0",
|
||||
"moment": "^2.29.1",
|
||||
"moment-timezone": "^0.5.34",
|
||||
"moment-timezone-data-webpack-plugin": "^1.5.0",
|
||||
|
|
@ -272,14 +274,14 @@
|
|||
"style-loader": "^0.23.1",
|
||||
"stylelint": "^9.10.1",
|
||||
"stylelint-config-wordpress": "^13.1.0",
|
||||
"terser-webpack-plugin": "^2.3.8",
|
||||
"ts-jest": "^27.1.3",
|
||||
"typescript": "^4.6.2",
|
||||
"url-loader": "^1.1.2",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack": "^5.70.0",
|
||||
"webpack-bundle-analyzer": "^3.9.0",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"webpack-cli": "^4.9.2",
|
||||
"webpack-fix-style-only-entries": "^0.6.1",
|
||||
"webpack-merge": "^5.8.0",
|
||||
"webpack-rtl-plugin": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
"sass-loader": "^10.2.1",
|
||||
"ts-jest": "^27.1.3",
|
||||
"typescript": "^4.6.2",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack": "^5.70.0",
|
||||
"webpack-cli": "^3.3.12"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
"sass-loader": "^10.2.1",
|
||||
"ts-jest": "^27.1.3",
|
||||
"typescript": "^4.6.2",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack": "^5.70.0",
|
||||
"webpack-cli": "^3.3.12"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
|
||||
- Update all js packages with minor/patch version changes. #8392
|
||||
|
||||
## Breaking changes
|
||||
- Updated to webpack 5 compatible #8476
|
||||
- Will need to change webpack config output.libraryTarget from 'this' to 'window' #8476
|
||||
|
||||
# 1.6.0
|
||||
|
||||
- Add new `bundledPackages` option to bundle in specific packages.
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
},
|
||||
"main": "src/index.js",
|
||||
"dependencies": {
|
||||
"@wordpress/dependency-extraction-webpack-plugin": "^2.9.0"
|
||||
"@wordpress/dependency-extraction-webpack-plugin": "^3.3.0"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
"rimraf": "^3.0.2",
|
||||
"ts-jest": "^27.1.3",
|
||||
"typescript": "^4.6.2",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack": "^5.70.0",
|
||||
"webpack-cli": "^3.3.12"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@
|
|||
"sass-loader": "^10.2.1",
|
||||
"ts-jest": "^27.1.3",
|
||||
"typescript": "^4.6.2",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack": "^5.70.0",
|
||||
"webpack-cli": "^3.3.12"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
"sass-loader": "^10.2.1",
|
||||
"ts-jest": "^27.1.3",
|
||||
"typescript": "^4.6.2",
|
||||
"webpack": "^4.46.0",
|
||||
"webpack": "^5.70.0",
|
||||
"webpack-cli": "^3.3.12"
|
||||
},
|
||||
"scripts": {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
/**
|
||||
* External dependencies
|
||||
*/
|
||||
const MiniCssExtractPlugin = require( '@automattic/mini-css-extract-plugin-with-rtl' );
|
||||
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
|
||||
const path = require( 'path' );
|
||||
const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
|
||||
const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' );
|
||||
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
|
||||
const postcssPlugins = require( '@wordpress/postcss-plugins-preset' );
|
||||
|
||||
const NODE_ENV = process.env.NODE_ENV || 'development';
|
||||
|
|
@ -46,7 +46,7 @@ module.exports = {
|
|||
},
|
||||
],
|
||||
plugins: [
|
||||
new FixStyleOnlyEntriesPlugin(),
|
||||
new RemoveEmptyScriptsPlugin(),
|
||||
new MiniCssExtractPlugin( {
|
||||
filename: '[name]/style.css',
|
||||
chunkFilename: 'chunks/[id].style.css',
|
||||
|
|
|
|||
|
|
@ -19,13 +19,13 @@
|
|||
"main": "src/index.js",
|
||||
"dependencies": {
|
||||
"@automattic/color-studio": "^2.5.0",
|
||||
"@automattic/mini-css-extract-plugin-with-rtl": "^0.8.0",
|
||||
"@wordpress/base-styles": "^3.6.0",
|
||||
"@wordpress/postcss-plugins-preset": "^1.6.0",
|
||||
"css-loader": "^3.6.0",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"sass-loader": "^10.2.1",
|
||||
"webpack-fix-style-only-entries": "^0.6.1",
|
||||
"webpack-remove-empty-scripts": "^0.7.3",
|
||||
"mini-css-extract-plugin": "^2.6.0",
|
||||
"webpack-rtl-plugin": "^2.0.0"
|
||||
},
|
||||
"private": true,
|
||||
|
|
@ -36,6 +36,6 @@
|
|||
"rimraf": "^3.0.2",
|
||||
"ts-jest": "^27.1.3",
|
||||
"typescript": "^4.6.2",
|
||||
"webpack": "^4.46.0"
|
||||
"webpack": "^5.70.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,9 @@
|
|||
const webpackOverride = require( '../webpack.config' );
|
||||
|
||||
module.exports = {
|
||||
core: {
|
||||
builder: 'webpack5',
|
||||
},
|
||||
stories: [
|
||||
// WooCommerce Admin / @woocommerce/components components
|
||||
'../../packages/components/src/**/stories/*.@(js|tsx)',
|
||||
|
|
|
|||
|
|
@ -44,28 +44,28 @@ module.exports = ( storybookConfig ) => {
|
|||
|
||||
storybookConfig.plugins.push(
|
||||
...wcAdminWebpackConfig.plugins,
|
||||
new CopyWebpackPlugin( [
|
||||
{
|
||||
from: path.resolve( __dirname, 'wordpress/css' ),
|
||||
to: 'wordpress/css',
|
||||
},
|
||||
{
|
||||
from: path.resolve(
|
||||
__dirname,
|
||||
`../packages/components/build-style/*.css`
|
||||
),
|
||||
to: `./component-css`,
|
||||
flatten: true,
|
||||
},
|
||||
{
|
||||
from: path.resolve(
|
||||
__dirname,
|
||||
`../packages/experimental/build-style/*.css`
|
||||
),
|
||||
to: `./experimental-css`,
|
||||
flatten: true,
|
||||
},
|
||||
] )
|
||||
new CopyWebpackPlugin( {
|
||||
patterns: [
|
||||
{
|
||||
from: path.resolve( __dirname, 'wordpress/css' ),
|
||||
to: 'wordpress/css/[name][ext]',
|
||||
},
|
||||
{
|
||||
from: path.resolve(
|
||||
__dirname,
|
||||
`../packages/components/build-style/*.css`
|
||||
),
|
||||
to: `./component-css/[name][ext]`,
|
||||
},
|
||||
{
|
||||
from: path.resolve(
|
||||
__dirname,
|
||||
`../packages/experimental/build-style/*.css`
|
||||
),
|
||||
to: `./experimental-css/[name][ext]`,
|
||||
},
|
||||
],
|
||||
} )
|
||||
);
|
||||
|
||||
return storybookConfig;
|
||||
|
|
|
|||
|
|
@ -8,19 +8,20 @@
|
|||
* 2. Remove check for development mode - we always want unminified files.
|
||||
* 3. Remove BannerPlugin support - we don't use it.
|
||||
* 4. Remove the 'min' suffix from the chunk loaded in the new `mainEntry` option.
|
||||
* 5. Hook into compilation later so we're running after Source Map generation.
|
||||
* 5. Hook into compilation later so we're running after Source Map generation. (https://webpack.js.org/api/compilation-hooks/: PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE)
|
||||
*/
|
||||
const path = require( 'path' );
|
||||
const ModuleFilenameHelpers = require( 'webpack/lib/ModuleFilenameHelpers' );
|
||||
const webpack = require( 'webpack' );
|
||||
|
||||
const getFileName = ( name, ext, opts ) => {
|
||||
if ( name.match(/([-_.]min)[-_.]/ ) ) {
|
||||
if ( name.match( /([-_.]min)[-_.]/ ) ) {
|
||||
return name.replace( /[-_.]min/, '' );
|
||||
}
|
||||
|
||||
const suffix = ( opts.postfix || 'nomin' ) + '.' + ext;
|
||||
if ( name.match( new RegExp( '\.' + ext + '$' ) ) ) {
|
||||
return name.replace( new RegExp( ext + '$' ), suffix )
|
||||
if ( name.match( new RegExp( '.' + ext + '$' ) ) ) {
|
||||
return name.replace( new RegExp( ext + '$' ), suffix );
|
||||
}
|
||||
|
||||
return name + suffix;
|
||||
|
|
@ -37,44 +38,80 @@ class UnminifyWebpackPlugin {
|
|||
}
|
||||
|
||||
apply( compiler ) {
|
||||
// Hook after asset optimization if we're using a devtool (source map).
|
||||
// @todo: Update to afterFinishAssets for Webpack 5.x?
|
||||
const compilationHook = compiler.options.devtool ? 'afterOptimizeAssets' : 'additionalAssets';
|
||||
const options = this.options;
|
||||
const outputNormal = {};
|
||||
|
||||
compiler.hooks.compilation.tap( 'UnminifyWebpackPlugin', ( compilation ) => {
|
||||
compilation.hooks[ compilationHook ].tap( 'UnminifyWebpackPlugin', () => {
|
||||
const files = [
|
||||
...compilation.additionalChunkAssets
|
||||
];
|
||||
compiler.hooks.compilation.tap(
|
||||
'UnminifyWebpackPlugin',
|
||||
( compilation ) => {
|
||||
compilation.hooks.processAssets.tap(
|
||||
{
|
||||
name: 'UnminifyWebpackPlugin',
|
||||
stage: webpack.Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_INLINE,
|
||||
},
|
||||
( assets ) => {
|
||||
Object.entries( assets ).forEach(
|
||||
( [ pathname, source ] ) => {
|
||||
if (
|
||||
! ModuleFilenameHelpers.matchObject(
|
||||
options,
|
||||
pathname
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
compilation.chunks.forEach( chunk => files.push( ...chunk.files ) );
|
||||
let sourceCode = source.source();
|
||||
if (
|
||||
options.mainEntry &&
|
||||
pathname === options.mainEntry
|
||||
) {
|
||||
sourceCode = sourceCode.replace(
|
||||
/ \+ "\.min\.js"$/m,
|
||||
' + ".js"'
|
||||
);
|
||||
}
|
||||
|
||||
const finalFiles = files.filter( ModuleFilenameHelpers.matchObject.bind( null, this.options ) );
|
||||
const dest = compiler.options.output.path;
|
||||
const outputPath = path.resolve(
|
||||
dest,
|
||||
getFileName(
|
||||
pathname,
|
||||
path.extname( pathname ).substr( 1 ),
|
||||
options
|
||||
)
|
||||
);
|
||||
|
||||
finalFiles.forEach( ( minified ) => {
|
||||
const asset = compilation.assets[ minified ];
|
||||
let source = asset.source();
|
||||
const ext = path.extname( minified ).substr( 1 );
|
||||
const unminified = getFileName( minified, ext, this.options );
|
||||
|
||||
// Remove the ".min" suffix from the lazy loaded chunk filenames.
|
||||
if ( this.options.mainEntry && minified === this.options.mainEntry ) {
|
||||
// See: https://github.com/webpack/webpack/blob/v4.43.0/lib/web/JsonpMainTemplatePlugin.js#L129
|
||||
// NOTE: This will break with Webpack 5.x!
|
||||
source = source.replace( / \+ "\.min\.js"$/m, ' + ".js"' );
|
||||
outputNormal[ outputPath ] = {
|
||||
filename: getFileName(
|
||||
pathname,
|
||||
path.extname( pathname ).substr( 1 ),
|
||||
options
|
||||
),
|
||||
content: sourceCode,
|
||||
size: Buffer.from( sourceCode, 'utf-8' )
|
||||
.length,
|
||||
};
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
compilation.assets[ unminified ] = {
|
||||
source: () => {
|
||||
return source;
|
||||
},
|
||||
size: () => {
|
||||
return source.length;
|
||||
compilation.hooks.afterProcessAssets.tap(
|
||||
'UnminifiedWebpackPlugin',
|
||||
() => {
|
||||
for ( const [ key, value ] of Object.entries(
|
||||
outputNormal
|
||||
) ) {
|
||||
compilation.emitAsset(
|
||||
value.filename,
|
||||
new webpack.sources.RawSource( value.content )
|
||||
);
|
||||
}
|
||||
};
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
);
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-web
|
|||
const BundleAnalyzerPlugin = require( 'webpack-bundle-analyzer' )
|
||||
.BundleAnalyzerPlugin;
|
||||
const MomentTimezoneDataPlugin = require( 'moment-timezone-data-webpack-plugin' );
|
||||
const TerserPlugin = require( 'terser-webpack-plugin' );
|
||||
const ForkTsCheckerWebpackPlugin = require( 'fork-ts-checker-webpack-plugin' );
|
||||
|
||||
/**
|
||||
|
|
@ -75,12 +74,13 @@ const webpackConfig = {
|
|||
chunkFilename: `chunks/[name]${ suffix }.js`,
|
||||
path: path.join( __dirname, 'dist' ),
|
||||
library: [ 'wc', '[modulename]' ],
|
||||
libraryTarget: 'this',
|
||||
jsonpFunction: '__wcAdmin_webpackJsonp',
|
||||
libraryTarget: 'window',
|
||||
uniqueName: '__wcAdmin_webpackJsonp',
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/,
|
||||
parser: {
|
||||
amd: false,
|
||||
},
|
||||
|
|
@ -119,6 +119,9 @@ const webpackConfig = {
|
|||
],
|
||||
},
|
||||
resolve: {
|
||||
fallback:{
|
||||
'crypto': 'empty'
|
||||
},
|
||||
extensions: [ '.json', '.js', '.jsx', '.ts', '.tsx' ],
|
||||
alias: {
|
||||
'~': path.resolve( __dirname + '/client' ),
|
||||
|
|
@ -142,13 +145,14 @@ const webpackConfig = {
|
|||
return outputPath;
|
||||
},
|
||||
} ),
|
||||
new CopyWebpackPlugin(
|
||||
wcAdminPackages.map( ( packageName ) => ( {
|
||||
new CopyWebpackPlugin({
|
||||
|
||||
patterns: wcAdminPackages.map( ( packageName ) => ( {
|
||||
from: `./packages/${ packageName }/build-style/*.css`,
|
||||
to: `./${ packageName }/`,
|
||||
flatten: true,
|
||||
transform: ( content ) => content,
|
||||
to: `./${ packageName }/[name][ext]`,
|
||||
noErrorOnMissing: true
|
||||
} ) )
|
||||
}
|
||||
),
|
||||
|
||||
// We reuse this Webpack setup for Storybook, where we need to disable dependency extraction.
|
||||
|
|
@ -169,13 +173,9 @@ const webpackConfig = {
|
|||
].filter( Boolean ),
|
||||
optimization: {
|
||||
minimize: NODE_ENV !== 'development',
|
||||
minimizer: [ new TerserPlugin() ],
|
||||
splitChunks: {
|
||||
name: false,
|
||||
},
|
||||
},
|
||||
node: {
|
||||
crypto: 'empty',
|
||||
name: false
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue