-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Extract reusable part of Webpack config and put in @wordpress/scripts (…
…#13814) * New build-config package with webpack config. Pull the Gutenberg webpack config into a package so it can be re-used for block/extension development. * Require new build-config package. * Dynamically handle WP externals with a function. Use code from WP Calypso for handling WP externals so we don't have to have the actual list of packages accessible in our webpack configuration. * Use webpack config from build-config package. * Require build-config package. * Adjust file refs for WP packages. * Move main gutenberg entry definition and webpack copy plugin out of build-config. * Add react-dev-utils for formatting webpack compiler messages. * Implement build script using webpack config from build-config. * Adjust output path so build goes to working directory. * Update package name to webpack-config * Apply more tweaks to the way webpack config package is structured * Update the way externals are handled * Add default values for entry and output * Move shared webpack config under @wordpress/scripts package * Improve the way how loaders are handled * Replace GUTENBERG with WP in webpack config env variables Co-Authored-By: gziolo <[email protected]> * Bring back feature flag to webpack config accidentally removed during merge * Add missing dev dependencies for the packages used in webpack config * Fix the list of excluded folders for babel-loader
- Loading branch information
Showing
14 changed files
with
305 additions
and
205 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 was deleted.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| const { BundleAnalyzerPlugin } = require( 'webpack-bundle-analyzer' ); | ||
| const LiveReloadPlugin = require( 'webpack-livereload-plugin' ); | ||
| const path = require( 'path' ); | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| const { camelCaseDash } = require( '../utils' ); | ||
|
|
||
| /** | ||
| * Converts @wordpress/* string request into request object. | ||
| * | ||
| * Note this isn't the same as camel case because of the | ||
| * way that numbers don't trigger the capitalized next letter. | ||
| * | ||
| * @example | ||
| * formatRequest( '@wordpress/api-fetch' ); | ||
| * // { this: [ 'wp', 'apiFetch' ] } | ||
| * formatRequest( '@wordpress/i18n' ); | ||
| * // { this: [ 'wp', 'i18n' ] } | ||
| * | ||
| * @param {string} request Request name from import statement. | ||
| * @return {Object} Request object formatted for further processing. | ||
| */ | ||
| const formatRequest = ( request ) => { | ||
| // '@wordpress/api-fetch' -> [ '@wordpress', 'api-fetch' ] | ||
| const [ , name ] = request.split( '/' ); | ||
|
|
||
| // { this: [ 'wp', 'apiFetch' ] } | ||
| return { | ||
| this: [ 'wp', camelCaseDash( name ) ], | ||
| }; | ||
| }; | ||
|
|
||
| const wordpressExternals = ( context, request, callback ) => { | ||
| if ( /^@wordpress\//.test( request ) ) { | ||
| callback( null, formatRequest( request ), 'this' ); | ||
| } else { | ||
| callback(); | ||
| } | ||
| }; | ||
|
|
||
| const externals = [ | ||
| { | ||
| react: 'React', | ||
| 'react-dom': 'ReactDOM', | ||
| moment: 'moment', | ||
| jquery: 'jQuery', | ||
| lodash: 'lodash', | ||
| 'lodash-es': 'lodash', | ||
| }, | ||
| wordpressExternals, | ||
| ]; | ||
|
|
||
| const isProduction = process.env.NODE_ENV === 'production'; | ||
| const mode = isProduction ? 'production' : 'development'; | ||
|
|
||
| const config = { | ||
| mode, | ||
| entry: { | ||
| index: path.resolve( process.cwd(), 'src', 'index.js' ), | ||
| }, | ||
| output: { | ||
| filename: '[name].js', | ||
| path: path.resolve( process.cwd(), 'build' ), | ||
| }, | ||
| externals, | ||
| resolve: { | ||
| alias: { | ||
| 'lodash-es': 'lodash', | ||
| }, | ||
| }, | ||
| module: { | ||
| rules: [ | ||
| { | ||
| test: /\.js$/, | ||
| use: require.resolve( 'source-map-loader' ), | ||
| enforce: 'pre', | ||
| }, | ||
| { | ||
| test: /\.js$/, | ||
| exclude: /node_modules/, | ||
| use: require.resolve( 'babel-loader' ), | ||
| }, | ||
| ], | ||
| }, | ||
| plugins: [ | ||
| // WP_BUNDLE_ANALYZER global variable enables utility that represents bundle content | ||
| // as convenient interactive zoomable treemap. | ||
| process.env.WP_BUNDLE_ANALYZER && new BundleAnalyzerPlugin(), | ||
| // 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 } ), | ||
| ].filter( Boolean ), | ||
| stats: { | ||
| children: false, | ||
| }, | ||
| }; | ||
|
|
||
| if ( ! isProduction ) { | ||
| // WP_DEVTOOL global variable controls how source maps are generated. | ||
| // See: https://webpack.js.org/configuration/devtool/#devtool. | ||
| config.devtool = process.env.WP_DEVTOOL || 'source-map'; | ||
| } | ||
|
|
||
| module.exports = config; |
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 |
|---|---|---|
|
|
@@ -32,4 +32,3 @@ if ( hasWebpackConfig ) { | |
| console.log( 'Webpack config file is missing.' ); | ||
| process.exit( 1 ); | ||
| } | ||
|
|
||
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
Oops, something went wrong.