woocommerce/plugins/woocommerce-admin/webpack.config.js

266 lines
6.9 KiB
JavaScript
Raw Normal View History

/**
* External dependencies
*/
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const { get } = require( 'lodash' );
const path = require( 'path' );
const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
const { DefinePlugin } = require( 'webpack' );
const WebpackRTLPlugin = require( 'webpack-rtl-plugin' );
const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' );
Use Route based code splitting to optimize bundle size (https://github.com/woocommerce/woocommerce-admin/pull/4094) * Use lazy loading to split up the size of the js downloaded * Use lazy loading to split up the size of the js downloaded * Add Moment Timezone plugin to reduce size of data file. * Lazy load header panels and use Dashicons for faster loading * Load assets from the correct publicPath * Load assets from the correct publicPath * PHP cs fixes * Fix missing quotes on string literal. * Fix PropType warning for lazy loaded component. * Separate the task list and dashboard chunks. * Lazy load dashboard sections. * Restore original icons and reduce size by importing only the icons needed * Lazy load alerts to save more Kb on initial load * Minify built JS in production mode. * Add preload tags for WC Admin assets. (https://github.com/woocommerce/woocommerce-admin/pull/4162) * Fix linting errors. * Add modified UnminifiedWebpackPlugin. * Produce minified and unminified bundles for all builds. * Remove unused variable from webpack config. * Run unminify after sourcemap generation. * Only hook after optimization if we're using a devtool. * Add minification suffix in Loader::get_url(). * Lazy load OBW on new home screen. * Move OBW style up a level to layout. * Hydrate ProfileWizard independently of withSelect and withDispatch * Fix order of composition and fallback function when using hydration. Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com> Co-authored-by: Paul Sealock <psealock@gmail.com>
2020-04-29 18:01:27 +00:00
const BundleAnalyzerPlugin = require( 'webpack-bundle-analyzer' )
.BundleAnalyzerPlugin;
const MomentTimezoneDataPlugin = require( 'moment-timezone-data-webpack-plugin' );
const TerserPlugin = require( 'terser-webpack-plugin' );
const UnminifyWebpackPlugin = require( './unminify' );
/**
* WordPress dependencies
*/
const CustomTemplatedPathPlugin = require( '@wordpress/custom-templated-path-webpack-plugin' );
const NODE_ENV = process.env.NODE_ENV || 'development';
2018-04-17 21:38:56 +00:00
// generate-feature-config.php defaults to 'plugin', so lets match that here.
let WC_ADMIN_PHASE = process.env.WC_ADMIN_PHASE || 'plugin';
if ( [ 'development', 'plugin', 'core' ].indexOf( WC_ADMIN_PHASE ) === -1 ) {
WC_ADMIN_PHASE = 'plugin';
}
const WC_ADMIN_CONFIG = require( path.join(
__dirname,
'config',
WC_ADMIN_PHASE + '.json'
) );
const WC_ADMIN_ADDITIONAL_FEATURES =
( process.env.WC_ADMIN_ADDITIONAL_FEATURES &&
JSON.parse( process.env.WC_ADMIN_ADDITIONAL_FEATURES ) ) ||
{};
2018-04-17 21:38:56 +00:00
const externals = {
'@wordpress/api-fetch': { this: [ 'wp', 'apiFetch' ] },
'@wordpress/blocks': { this: [ 'wp', 'blocks' ] },
'@wordpress/data': { this: [ 'wp', 'data' ] },
'@wordpress/editor': { this: [ 'wp', 'editor' ] },
'@wordpress/element': { this: [ 'wp', 'element' ] },
'@wordpress/hooks': { this: [ 'wp', 'hooks' ] },
'@wordpress/url': { this: [ 'wp', 'url' ] },
'@wordpress/html-entities': { this: [ 'wp', 'htmlEntities' ] },
'@wordpress/i18n': { this: [ 'wp', 'i18n' ] },
wp.data Settings refactor add data store for settings using wp.data add use-select-with-refresh example replace fresh-data usage with new settings data store for settings page Add data package move to packages Fix isDirty after save Add isBusy to primary button when saving update Readme remove comment readme to use useSelect Revert "update Readme" This reverts commit 7402fd49b8f384fde5878e0bee0616f0a87bb4f6. Data Layer: Settings page to use Settings store (https://github.com/woocommerce/woocommerce-admin/pull/3430) * Data Layer: Settings store as source of truth for settings page This reverts commit 7402fd49b8f384fde5878e0bee0616f0a87bb4f6. * fixup * save on reset * non mutable constants * add set/getSettings * save using setSettings * separate HOC * cleanup * remove settingsToData * withHydration * remove withSettings HOC * renmove useSettins for now * withSettingsHydration updates * Revert "withSettingsHydration updates" This reverts commit f2adf108fbe19b574978fea5925a1a18e7ed3007. * rename withSettingsHydration * redo withSettingsHydration simplification * restore * useSettings * render using useSettings * handleInputChange working * get setIsDirty working * saving works * reset and cleanup * cleanup * use snake case on hook files * use clearIsDirty * Avoid mutation on setting update * remove @todo * persiting -> isPersisting * better reducer ternaries * add wcSettings as arg to withSettingsHydration reset package-lock Settings: split out mutable wcAdminSettings (https://github.com/woocommerce/woocommerce-admin/pull/3675) Settings: handle async settings groups (https://github.com/woocommerce/woocommerce-admin/pull/3707)
2020-03-25 03:20:17 +00:00
'@wordpress/data-controls': { this: [ 'wp', 'dataControls' ] },
2018-04-17 21:38:56 +00:00
tinymce: 'tinymce',
moment: 'moment',
react: 'React',
2019-04-12 02:52:03 +00:00
lodash: 'lodash',
'react-dom': 'ReactDOM',
2018-04-17 21:38:56 +00:00
};
const wcAdminPackages = [
'components',
'csv-export',
'currency',
'date',
'navigation',
'number',
wp.data Settings refactor add data store for settings using wp.data add use-select-with-refresh example replace fresh-data usage with new settings data store for settings page Add data package move to packages Fix isDirty after save Add isBusy to primary button when saving update Readme remove comment readme to use useSelect Revert "update Readme" This reverts commit 7402fd49b8f384fde5878e0bee0616f0a87bb4f6. Data Layer: Settings page to use Settings store (https://github.com/woocommerce/woocommerce-admin/pull/3430) * Data Layer: Settings store as source of truth for settings page This reverts commit 7402fd49b8f384fde5878e0bee0616f0a87bb4f6. * fixup * save on reset * non mutable constants * add set/getSettings * save using setSettings * separate HOC * cleanup * remove settingsToData * withHydration * remove withSettings HOC * renmove useSettins for now * withSettingsHydration updates * Revert "withSettingsHydration updates" This reverts commit f2adf108fbe19b574978fea5925a1a18e7ed3007. * rename withSettingsHydration * redo withSettingsHydration simplification * restore * useSettings * render using useSettings * handleInputChange working * get setIsDirty working * saving works * reset and cleanup * cleanup * use snake case on hook files * use clearIsDirty * Avoid mutation on setting update * remove @todo * persiting -> isPersisting * better reducer ternaries * add wcSettings as arg to withSettingsHydration reset package-lock Settings: split out mutable wcAdminSettings (https://github.com/woocommerce/woocommerce-admin/pull/3675) Settings: handle async settings groups (https://github.com/woocommerce/woocommerce-admin/pull/3707)
2020-03-25 03:20:17 +00:00
'data',
];
const entryPoints = {};
wcAdminPackages.forEach( ( name ) => {
externals[ `@woocommerce/${ name }` ] = {
this: [
'wc',
name.replace( /-([a-z])/g, ( match, letter ) =>
letter.toUpperCase()
),
],
};
entryPoints[ name ] = `./packages/${ name }`;
} );
const wpAdminScripts = [
'onboarding-homepage-notice',
'onboarding-product-notice',
'onboarding-product-import-notice',
'onboarding-tax-notice',
'print-shipping-label-banner',
];
wpAdminScripts.forEach( ( name ) => {
entryPoints[ name ] = `./client/wp-admin-scripts/${ name }`;
} );
2018-04-17 21:38:56 +00:00
const webpackConfig = {
mode: NODE_ENV,
entry: {
app: './client/index.js',
ie: './client/ie.scss',
...entryPoints,
},
2018-04-17 21:38:56 +00:00
output: {
filename: ( data ) => {
return wpAdminScripts.includes( data.chunk.name )
Use Route based code splitting to optimize bundle size (https://github.com/woocommerce/woocommerce-admin/pull/4094) * Use lazy loading to split up the size of the js downloaded * Use lazy loading to split up the size of the js downloaded * Add Moment Timezone plugin to reduce size of data file. * Lazy load header panels and use Dashicons for faster loading * Load assets from the correct publicPath * Load assets from the correct publicPath * PHP cs fixes * Fix missing quotes on string literal. * Fix PropType warning for lazy loaded component. * Separate the task list and dashboard chunks. * Lazy load dashboard sections. * Restore original icons and reduce size by importing only the icons needed * Lazy load alerts to save more Kb on initial load * Minify built JS in production mode. * Add preload tags for WC Admin assets. (https://github.com/woocommerce/woocommerce-admin/pull/4162) * Fix linting errors. * Add modified UnminifiedWebpackPlugin. * Produce minified and unminified bundles for all builds. * Remove unused variable from webpack config. * Run unminify after sourcemap generation. * Only hook after optimization if we're using a devtool. * Add minification suffix in Loader::get_url(). * Lazy load OBW on new home screen. * Move OBW style up a level to layout. * Hydrate ProfileWizard independently of withSelect and withDispatch * Fix order of composition and fallback function when using hydration. Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com> Co-authored-by: Paul Sealock <psealock@gmail.com>
2020-04-29 18:01:27 +00:00
? `wp-admin-scripts/[name].min.js`
: `[name]/index.min.js`;
},
Use Route based code splitting to optimize bundle size (https://github.com/woocommerce/woocommerce-admin/pull/4094) * Use lazy loading to split up the size of the js downloaded * Use lazy loading to split up the size of the js downloaded * Add Moment Timezone plugin to reduce size of data file. * Lazy load header panels and use Dashicons for faster loading * Load assets from the correct publicPath * Load assets from the correct publicPath * PHP cs fixes * Fix missing quotes on string literal. * Fix PropType warning for lazy loaded component. * Separate the task list and dashboard chunks. * Lazy load dashboard sections. * Restore original icons and reduce size by importing only the icons needed * Lazy load alerts to save more Kb on initial load * Minify built JS in production mode. * Add preload tags for WC Admin assets. (https://github.com/woocommerce/woocommerce-admin/pull/4162) * Fix linting errors. * Add modified UnminifiedWebpackPlugin. * Produce minified and unminified bundles for all builds. * Remove unused variable from webpack config. * Run unminify after sourcemap generation. * Only hook after optimization if we're using a devtool. * Add minification suffix in Loader::get_url(). * Lazy load OBW on new home screen. * Move OBW style up a level to layout. * Hydrate ProfileWizard independently of withSelect and withDispatch * Fix order of composition and fallback function when using hydration. Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com> Co-authored-by: Paul Sealock <psealock@gmail.com>
2020-04-29 18:01:27 +00:00
chunkFilename: `chunks/[name].[chunkhash].min.js`,
path: path.join( __dirname, 'dist' ),
library: [ 'wc', '[modulename]' ],
2018-04-17 21:38:56 +00:00
libraryTarget: 'this',
},
externals,
module: {
rules: [
{
parser: {
amd: false,
},
},
2018-04-17 21:38:56 +00:00
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
2018-04-17 21:38:56 +00:00
},
{
test: /\.js?$/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/preset-env',
{ loose: true, modules: 'commonjs' },
],
],
plugins: [ 'transform-es2015-template-literals' ],
},
},
include: new RegExp(
'/node_modules/(' +
'|acorn-jsx' +
'|d3-array' +
'|debug' +
'|marked' +
'|regexpu-core' +
'|unicode-match-property-ecmascript' +
'|unicode-match-property-value-ecmascript)/'
),
},
{ test: /\.md$/, use: 'raw-loader' },
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
},
2018-04-17 21:38:56 +00:00
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
{
// postcss loader so we can use autoprefixer and theme Gutenberg components
loader: 'postcss-loader',
options: {
config: {
path: 'postcss.config.js',
},
},
},
{
loader: 'sass-loader',
options: {
sassOptions: {
includePaths: [
'client/stylesheets/abstracts',
],
},
prependData:
'@import "node_modules/@wordpress/base-styles/_colors.scss"; ' +
'@import "node_modules/@wordpress/base-styles/_variables.scss"; ' +
'@import "node_modules/@wordpress/base-styles/_mixins.scss"; ' +
'@import "node_modules/@wordpress/base-styles/_breakpoints.scss"; ' +
'@import "node_modules/@wordpress/base-styles/_animations.scss"; ' +
'@import "node_modules/@wordpress/base-styles/_z-index.scss"; ' +
'@import "_colors"; ' +
'@import "_variables"; ' +
'@import "_breakpoints"; ' +
'@import "_mixins"; ',
},
},
],
2018-04-17 21:38:56 +00:00
},
],
},
resolve: {
extensions: [ '.json', '.js', '.jsx' ],
modules: [ path.join( __dirname, 'client' ), 'node_modules' ],
2018-07-20 03:40:15 +00:00
alias: {
'gutenberg-components': path.resolve(
__dirname,
'node_modules/@wordpress/components/src'
),
2019-07-24 15:37:37 +00:00
// @todo - remove once https://github.com/WordPress/gutenberg/pull/16196 is released.
'react-spring': 'react-spring/web.cjs',
'@woocommerce/wc-admin-settings': path.resolve(
__dirname,
'client/settings/index.js'
),
2018-07-20 03:40:15 +00:00
},
},
plugins: [
new FixStyleOnlyEntriesPlugin(),
// Inject the current feature flags.
new DefinePlugin( {
'window.wcAdminFeatures': {
...WC_ADMIN_CONFIG.features,
...WC_ADMIN_ADDITIONAL_FEATURES,
},
} ),
new CustomTemplatedPathPlugin( {
modulename( outputPath, data ) {
const entryName = get( data, [ 'chunk', 'name' ] );
if ( entryName ) {
return entryName.replace( /-([a-z])/g, ( match, letter ) =>
letter.toUpperCase()
);
}
return outputPath;
},
} ),
new WebpackRTLPlugin( {
Use Route based code splitting to optimize bundle size (https://github.com/woocommerce/woocommerce-admin/pull/4094) * Use lazy loading to split up the size of the js downloaded * Use lazy loading to split up the size of the js downloaded * Add Moment Timezone plugin to reduce size of data file. * Lazy load header panels and use Dashicons for faster loading * Load assets from the correct publicPath * Load assets from the correct publicPath * PHP cs fixes * Fix missing quotes on string literal. * Fix PropType warning for lazy loaded component. * Separate the task list and dashboard chunks. * Lazy load dashboard sections. * Restore original icons and reduce size by importing only the icons needed * Lazy load alerts to save more Kb on initial load * Minify built JS in production mode. * Add preload tags for WC Admin assets. (https://github.com/woocommerce/woocommerce-admin/pull/4162) * Fix linting errors. * Add modified UnminifiedWebpackPlugin. * Produce minified and unminified bundles for all builds. * Remove unused variable from webpack config. * Run unminify after sourcemap generation. * Only hook after optimization if we're using a devtool. * Add minification suffix in Loader::get_url(). * Lazy load OBW on new home screen. * Move OBW style up a level to layout. * Hydrate ProfileWizard independently of withSelect and withDispatch * Fix order of composition and fallback function when using hydration. Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com> Co-authored-by: Paul Sealock <psealock@gmail.com>
2020-04-29 18:01:27 +00:00
filename: './[name]/style-rtl.css',
minify: {
safe: true,
},
} ),
new MiniCssExtractPlugin( {
Use Route based code splitting to optimize bundle size (https://github.com/woocommerce/woocommerce-admin/pull/4094) * Use lazy loading to split up the size of the js downloaded * Use lazy loading to split up the size of the js downloaded * Add Moment Timezone plugin to reduce size of data file. * Lazy load header panels and use Dashicons for faster loading * Load assets from the correct publicPath * Load assets from the correct publicPath * PHP cs fixes * Fix missing quotes on string literal. * Fix PropType warning for lazy loaded component. * Separate the task list and dashboard chunks. * Lazy load dashboard sections. * Restore original icons and reduce size by importing only the icons needed * Lazy load alerts to save more Kb on initial load * Minify built JS in production mode. * Add preload tags for WC Admin assets. (https://github.com/woocommerce/woocommerce-admin/pull/4162) * Fix linting errors. * Add modified UnminifiedWebpackPlugin. * Produce minified and unminified bundles for all builds. * Remove unused variable from webpack config. * Run unminify after sourcemap generation. * Only hook after optimization if we're using a devtool. * Add minification suffix in Loader::get_url(). * Lazy load OBW on new home screen. * Move OBW style up a level to layout. * Hydrate ProfileWizard independently of withSelect and withDispatch * Fix order of composition and fallback function when using hydration. Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com> Co-authored-by: Paul Sealock <psealock@gmail.com>
2020-04-29 18:01:27 +00:00
filename: './[name]/style.css',
} ),
new CopyWebpackPlugin(
wcAdminPackages.map( ( packageName ) => ( {
from: `./packages/${ packageName }/build-style/*.css`,
Use Route based code splitting to optimize bundle size (https://github.com/woocommerce/woocommerce-admin/pull/4094) * Use lazy loading to split up the size of the js downloaded * Use lazy loading to split up the size of the js downloaded * Add Moment Timezone plugin to reduce size of data file. * Lazy load header panels and use Dashicons for faster loading * Load assets from the correct publicPath * Load assets from the correct publicPath * PHP cs fixes * Fix missing quotes on string literal. * Fix PropType warning for lazy loaded component. * Separate the task list and dashboard chunks. * Lazy load dashboard sections. * Restore original icons and reduce size by importing only the icons needed * Lazy load alerts to save more Kb on initial load * Minify built JS in production mode. * Add preload tags for WC Admin assets. (https://github.com/woocommerce/woocommerce-admin/pull/4162) * Fix linting errors. * Add modified UnminifiedWebpackPlugin. * Produce minified and unminified bundles for all builds. * Remove unused variable from webpack config. * Run unminify after sourcemap generation. * Only hook after optimization if we're using a devtool. * Add minification suffix in Loader::get_url(). * Lazy load OBW on new home screen. * Move OBW style up a level to layout. * Hydrate ProfileWizard independently of withSelect and withDispatch * Fix order of composition and fallback function when using hydration. Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com> Co-authored-by: Paul Sealock <psealock@gmail.com>
2020-04-29 18:01:27 +00:00
to: `./${ packageName }/`,
flatten: true,
transform: ( content ) => content,
} ) )
),
Use Route based code splitting to optimize bundle size (https://github.com/woocommerce/woocommerce-admin/pull/4094) * Use lazy loading to split up the size of the js downloaded * Use lazy loading to split up the size of the js downloaded * Add Moment Timezone plugin to reduce size of data file. * Lazy load header panels and use Dashicons for faster loading * Load assets from the correct publicPath * Load assets from the correct publicPath * PHP cs fixes * Fix missing quotes on string literal. * Fix PropType warning for lazy loaded component. * Separate the task list and dashboard chunks. * Lazy load dashboard sections. * Restore original icons and reduce size by importing only the icons needed * Lazy load alerts to save more Kb on initial load * Minify built JS in production mode. * Add preload tags for WC Admin assets. (https://github.com/woocommerce/woocommerce-admin/pull/4162) * Fix linting errors. * Add modified UnminifiedWebpackPlugin. * Produce minified and unminified bundles for all builds. * Remove unused variable from webpack config. * Run unminify after sourcemap generation. * Only hook after optimization if we're using a devtool. * Add minification suffix in Loader::get_url(). * Lazy load OBW on new home screen. * Move OBW style up a level to layout. * Hydrate ProfileWizard independently of withSelect and withDispatch * Fix order of composition and fallback function when using hydration. Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com> Co-authored-by: Paul Sealock <psealock@gmail.com>
2020-04-29 18:01:27 +00:00
new MomentTimezoneDataPlugin( {
startYear: 2000, // This strips out timezone data before the year 2000 to make a smaller file.
} ),
process.env.ANALYZE && new BundleAnalyzerPlugin(),
new UnminifyWebpackPlugin( {
test: /\.js($|\?)/i,
mainEntry: 'app/index.min.js',
} ),
].filter( Boolean ),
optimization: {
minimize: NODE_ENV !== 'development',
minimizer: [
new TerserPlugin(),
],
},
2018-04-17 21:38:56 +00:00
};
if ( webpackConfig.mode !== 'production' ) {
webpackConfig.devtool = process.env.SOURCEMAP || 'source-map';
}
2018-04-17 21:38:56 +00:00
module.exports = webpackConfig;