tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity
789cb5b465
silverstripe-framework/webpack.config.js

247 lines
7.6 KiB
JavaScript
Raw Normal View History

API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
const webpack = require('webpack');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
move admin JS src folder to resolve as root, rather than as modules
2016-10-06 09:43:59 +02:00
const path = require('path');
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
// const SprityWebpackPlugin = require('sprity-webpack-plugin');
const PATHS = {
MODULES: './node_modules',
ADMIN: './admin',
ADMIN_IMAGES: './admin/client/dist/images',
ADMIN_CSS_SRC: './admin/client/src/styles',
ADMIN_CSS_DIST: './admin/client/dist/styles',
ADMIN_THIRDPARTY: './admin/thirdparty',
ADMIN_JS_SRC: './admin/client/src',
ADMIN_JS_DIST: './admin/client/dist/js',
FRAMEWORK: '.',
FRAMEWORK_THIRDPARTY: './thirdparty',
Separate CSS bundling in Webpack Multiple entry points can't result in a single bundle.css with a fixed filename, see https://github.com/webpack/extract-text-webpack-plugin/issues/179 Until that's resolved, it's easier to keep the 'css' task separate in Webpack, and have a single entry point for all CSS (bundle.scss). Also partially reverting "Moved frontend assets into admin/ "module"", which moved too many files: debug.css and install.css need to remain as framework (not admin) deps. Split out into a separate `framework-css` Webpack task in preparation for splitting off the module.
2016-09-14 14:07:05 +02:00
FRAMEWORK_CSS_SRC: './client/src/styles',
FRAMEWORK_CSS_DIST: './client/dist/styles',
NEW: Fixes to allow code files in src/ folder. Separated from the file renames for clarity.
2016-11-01 04:13:06 +01:00
INSTALL_CSS_SRC: './src/Dev/Install/client/src/styles',
INSTALL_CSS_DIST: './src/Dev/Install/client/dist/styles',
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
};
// Used for autoprefixing css properties (same as Bootstrap Aplha.2 defaults)
const SUPPORTED_BROWSERS = [
'Chrome >= 35',
'Firefox >= 31',
'Edge >= 12',
'Explorer >= 9',
'iOS >= 8',
'Safari >= 8',
'Android 2.3',
'Android >= 4',
'Opera >= 12',
];
const config = [
{
Separate CSS bundling in Webpack Multiple entry points can't result in a single bundle.css with a fixed filename, see https://github.com/webpack/extract-text-webpack-plugin/issues/179 Until that's resolved, it's easier to keep the 'css' task separate in Webpack, and have a single entry point for all CSS (bundle.scss). Also partially reverting "Moved frontend assets into admin/ "module"", which moved too many files: debug.css and install.css need to remain as framework (not admin) deps. Split out into a separate `framework-css` Webpack task in preparation for splitting off the module.
2016-09-14 14:07:05 +02:00
// TODO Split out with new 'admin' module
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
name: 'js',
entry: {
Optimise webpack build time (#6049) * Rename bundles (prep for webpack optimisation) This might or might not reduce the overall repo size, because git can combine similar chunks in the newly generated files * Optimise webpack build time Consolidates bundles, since a separation of bundle-framework.js vs. bundle-legacy.js vs. bundle-lib.js no longer makes sense - they're all loaded upfront anyway, since we'll be introducing more react-powered logic alongside the "legacy" JavaScript. By consolidating into fewer bundles, we give the optimisation scripts (UglifyJS) more options to reduce the overall file size. The main motivation for a vendor.js is to shorten rebuild times: Most active development is happening in files required through bundle.js. This commit drastically reduces the rebuild time for those changes (15s to 4s).
2016-09-21 07:14:43 +02:00
vendor: `${PATHS.ADMIN_JS_SRC}/bundles/vendor.js`,
bundle: `${PATHS.ADMIN_JS_SRC}/bundles/bundle.js`,
FIX Webpack handles images & fonts. Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems.
2016-08-26 05:37:43 +02:00
'LeftAndMain.Ping': `${PATHS.ADMIN_JS_SRC}/legacy/LeftAndMain.Ping.js`,
leaktools: `${PATHS.ADMIN_JS_SRC}/legacy/leaktools.js`,
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
MemberImportForm: `${PATHS.ADMIN_JS_SRC}/legacy/MemberImportForm.js`,
CMSSecurity: `${PATHS.ADMIN_JS_SRC}/legacy/CMSSecurity.js`,
API Moved frontend assets into admin/ "module" We've removed the ability to directly reference JS and CSS files for form fields and other SilverStripe features in favour of a common bundle built by Webpack. The logical next step is to make the framework module free of frontend dependencies, which should simplify its operation, and avoid another time intensive "npm install" on a module.
2016-09-13 11:28:47 +02:00
UploadField_select: `${PATHS.ADMIN_JS_SRC}/legacy/UploadField_select.js`,
TinyMCE_SSPlugin: `${PATHS.ADMIN_JS_SRC}/legacy/TinyMCE_SSPlugin.js`,
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
},
resolve: {
move admin JS src folder to resolve as root, rather than as modules
2016-10-06 09:43:59 +02:00
root: [__dirname, path.resolve(__dirname, PATHS.ADMIN_JS_SRC)],
modulesDirectories: [PATHS.MODULES],
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
},
output: {
path: 'admin/client/dist',
filename: 'js/[name].js',
},
// lib.js provies these globals and more. These references allow the framework bundle
// to access them.
externals: {
'bootstrap-collapse': 'BootstrapCollapse',
'components/Breadcrumb/Breadcrumb': 'Breadcrumb',
'state/breadcrumbs/BreadcrumbsActions': 'BreadcrumbsActions',
API Create loading state for schema API Create stateOverride state for schema Enhancement Moved crumbs property to rely on redux state Enhancement Updated file app icon names API Added InsertMediaModal functionality to HtmlEditorField API Removed dependency on schema ID that is returned from server API Added afterMessages property for FormBuilder to display content after the alert message
2016-11-22 03:18:26 +01:00
'state/schema/SchemaActions': 'SchemaActions',
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
'components/FormAction/FormAction': 'FormAction',
'components/FormBuilder/FormBuilder': 'FormBuilder',
Add new FormBuilderModal (required for asset-admin)
2016-08-29 13:26:13 +02:00
'components/FormBuilderModal/FormBuilderModal': 'FormBuilderModal',
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
'components/GridField/GridField': 'GridField',
'components/Toolbar/Toolbar': 'Toolbar',
Use redux-form instead of custom actions/reducers (fixes #5524) - Removed custom form reducers in favour of redux-form (updateField(), addForm(), etc) - Storing 'state' in schema reducer to avoid a separate forms reducer tree (no longer needed for other use cases). This means 'state' is only the "initial state", any form edits will be handled by redux-form internally in the 'reduxForm' reducer namespace - Removed componentWillUnmount() from <Form> since there's no more reducer state to clean up (removed formReducer.js), and redux-form handles that internally - Removed isFetching state from <FormBuilder> since there's now a props.submitting coming from redux-form - Improved passing of "clicked button" (submittingAction), using component state rather than reducer and passing it into action handlers (no need for components to inspect it any other way) - Hacky duplication of this.submittingAction and this.state.submittingAction to avoid re-render of <FormBuilder> *during* a submission (see https://github.com/erikras/redux-form/issues/1944) - Inlined handleSubmit() XHR (rather than using a redux action). There's other ways for form consumers to listen to form evens (e.g. onSubmitSuccess passed through <FormBuilder> into reduxForm()). - Adapting checkbox/radio fields to redux-forms Need to send onChange event with values rather than the original event, see http://redux-form.com/6.1.1/docs/api/Field.md/#-input-onchange-eventorvalue-function- - Using reduxForm() within render() causes DOM to get thrown away, and has weird side effects like https://github.com/erikras/redux-form/issues/1944. See https://github.com/erikras/redux-form/issues/603#issuecomment-176397728 - Refactored <FormBuilderLoader> as a separate container component which connects to redux and redux-form. This keeps the <FormBuilder> component dependency free and easy to test. It'll also be an advantage if we switch to a GraphQL backed component, in which case the async loading routines will look very different from the current <FormBuilderLoader> implementation - Refactoring out the redux-form dependency from FormBuilder to make it more testable (through baseFormComponent and baseFieldComponent) - Passing through 'form' to allow custom identifiers (which is important because currently the schema "id" contains the record identifier, making the form identifier non-deterministic - which means you can't use it with the redux-form selector API)
2016-10-12 03:47:14 +02:00
'containers/FormBuilderLoader/FormBuilderLoader': 'FormBuilderLoader',
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
'deep-freeze-strict': 'DeepFreezeStrict',
i18n: 'i18n',
jQuery: 'jQuery',
'lib/Backend': 'Backend',
'lib/ReducerRegister': 'ReducerRegister',
'lib/ReactRouteRegister': 'ReactRouteRegister',
'lib/SilverStripeComponent': 'SilverStripeComponent',
'page.js': 'Page',
'react-addons-test-utils': 'ReactAddonsTestUtils',
'react-dom': 'ReactDom',
tether: 'Tether',
'react-bootstrap-ss': 'ReactBootstrap',
'react-redux': 'ReactRedux',
'react-router-redux': 'ReactRouterRedux',
'react-router': 'ReactRouter',
Add new FormBuilderModal (required for asset-admin)
2016-08-29 13:26:13 +02:00
'react-addons-css-transition-group': 'ReactAddonsCssTransitionGroup',
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
react: 'React',
Use redux-form instead of custom actions/reducers (fixes #5524) - Removed custom form reducers in favour of redux-form (updateField(), addForm(), etc) - Storing 'state' in schema reducer to avoid a separate forms reducer tree (no longer needed for other use cases). This means 'state' is only the "initial state", any form edits will be handled by redux-form internally in the 'reduxForm' reducer namespace - Removed componentWillUnmount() from <Form> since there's no more reducer state to clean up (removed formReducer.js), and redux-form handles that internally - Removed isFetching state from <FormBuilder> since there's now a props.submitting coming from redux-form - Improved passing of "clicked button" (submittingAction), using component state rather than reducer and passing it into action handlers (no need for components to inspect it any other way) - Hacky duplication of this.submittingAction and this.state.submittingAction to avoid re-render of <FormBuilder> *during* a submission (see https://github.com/erikras/redux-form/issues/1944) - Inlined handleSubmit() XHR (rather than using a redux action). There's other ways for form consumers to listen to form evens (e.g. onSubmitSuccess passed through <FormBuilder> into reduxForm()). - Adapting checkbox/radio fields to redux-forms Need to send onChange event with values rather than the original event, see http://redux-form.com/6.1.1/docs/api/Field.md/#-input-onchange-eventorvalue-function- - Using reduxForm() within render() causes DOM to get thrown away, and has weird side effects like https://github.com/erikras/redux-form/issues/1944. See https://github.com/erikras/redux-form/issues/603#issuecomment-176397728 - Refactored <FormBuilderLoader> as a separate container component which connects to redux and redux-form. This keeps the <FormBuilder> component dependency free and easy to test. It'll also be an advantage if we switch to a GraphQL backed component, in which case the async loading routines will look very different from the current <FormBuilderLoader> implementation - Refactoring out the redux-form dependency from FormBuilder to make it more testable (through baseFormComponent and baseFieldComponent) - Passing through 'form' to allow custom identifiers (which is important because currently the schema "id" contains the record identifier, making the form identifier non-deterministic - which means you can't use it with the redux-form selector API)
2016-10-12 03:47:14 +02:00
'redux-form': 'ReduxForm',
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
'redux-thunk': 'ReduxThunk',
redux: 'Redux',
config: 'Config',
'lib/Router': 'Router',
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|thirdparty)/,
FIX Webpack handles images & fonts. Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems.
2016-08-26 05:37:43 +02:00
loader: 'babel',
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
query: {
presets: ['es2015', 'react'],
plugins: ['transform-object-assign', 'transform-object-rest-spread'],
comments: false,
},
},
Separate CSS bundling in Webpack Multiple entry points can't result in a single bundle.css with a fixed filename, see https://github.com/webpack/extract-text-webpack-plugin/issues/179 Until that's resolved, it's easier to keep the 'css' task separate in Webpack, and have a single entry point for all CSS (bundle.scss). Also partially reverting "Moved frontend assets into admin/ "module"", which moved too many files: debug.css and install.css need to remain as framework (not admin) deps. Split out into a separate `framework-css` Webpack task in preparation for splitting off the module.
2016-09-14 14:07:05 +02:00
{
test: '/i18n.js/',
loader: 'script-loader',
},
],
},
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jQuery',
$: 'jQuery',
}),
new webpack.DefinePlugin({
'process.env':{
// Builds React in production mode, avoiding console warnings
'NODE_ENV': JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
unused: false,
warnings: false,
},
FIX: Break dist javascript and onto newlines. This doesn’t have much impact on resulting JS size, but it will hopefully make merge conflicts much less frequent. The CSS growth is a little higher (6.5% increase in size) but is not material. If this materially reduces the number of merge conflicts we have, by letting the git merge tools resolve some dist file mergers, I think it would be worth it. Some example changes in file size: bundle.js 290K -> 301K vendor.js 1,325K -> 1,321K bundle.css 628K -> 669K
2016-09-21 07:30:24 +02:00
output: {
beautify: false,
semicolons: false,
comments: false,
max_line_len: 200,
},
Separate CSS bundling in Webpack Multiple entry points can't result in a single bundle.css with a fixed filename, see https://github.com/webpack/extract-text-webpack-plugin/issues/179 Until that's resolved, it's easier to keep the 'css' task separate in Webpack, and have a single entry point for all CSS (bundle.scss). Also partially reverting "Moved frontend assets into admin/ "module"", which moved too many files: debug.css and install.css need to remain as framework (not admin) deps. Split out into a separate `framework-css` Webpack task in preparation for splitting off the module.
2016-09-14 14:07:05 +02:00
}),
Optimise webpack build time (#6049) * Rename bundles (prep for webpack optimisation) This might or might not reduce the overall repo size, because git can combine similar chunks in the newly generated files * Optimise webpack build time Consolidates bundles, since a separation of bundle-framework.js vs. bundle-legacy.js vs. bundle-lib.js no longer makes sense - they're all loaded upfront anyway, since we'll be introducing more react-powered logic alongside the "legacy" JavaScript. By consolidating into fewer bundles, we give the optimisation scripts (UglifyJS) more options to reduce the overall file size. The main motivation for a vendor.js is to shorten rebuild times: Most active development is happening in files required through bundle.js. This commit drastically reduces the rebuild time for those changes (15s to 4s).
2016-09-21 07:14:43 +02:00
// Most vendor libs are loaded directly into the 'vendor' bundle (through require() calls in vendor.js).
// This ensures that any further require() calls in other bundles aren't duplicating libs.
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
}),
Separate CSS bundling in Webpack Multiple entry points can't result in a single bundle.css with a fixed filename, see https://github.com/webpack/extract-text-webpack-plugin/issues/179 Until that's resolved, it's easier to keep the 'css' task separate in Webpack, and have a single entry point for all CSS (bundle.scss). Also partially reverting "Moved frontend assets into admin/ "module"", which moved too many files: debug.css and install.css need to remain as framework (not admin) deps. Split out into a separate `framework-css` Webpack task in preparation for splitting off the module.
2016-09-14 14:07:05 +02:00
],
},
{
// TODO Split out with new 'admin' module
name: 'css',
entry: {
'bundle': `${PATHS.ADMIN_CSS_SRC}/bundle.scss`,
'editor': `${PATHS.ADMIN_CSS_SRC}/editor.scss`,
'GridField_print': `${PATHS.ADMIN_CSS_SRC}/legacy/GridField_print.scss`,
'AssetUploadField': `${PATHS.ADMIN_CSS_SRC}/legacy/AssetUploadField.scss`,
'UploadField': `${PATHS.ADMIN_CSS_SRC}/legacy/UploadField.scss`,
},
output: {
Fix webpack css config, removes duplicate css files that were generated
2016-10-28 13:51:44 +02:00
path: 'admin/client/dist/styles',
Separate CSS bundling in Webpack Multiple entry points can't result in a single bundle.css with a fixed filename, see https://github.com/webpack/extract-text-webpack-plugin/issues/179 Until that's resolved, it's easier to keep the 'css' task separate in Webpack, and have a single entry point for all CSS (bundle.scss). Also partially reverting "Moved frontend assets into admin/ "module"", which moved too many files: debug.css and install.css need to remain as framework (not admin) deps. Split out into a separate `framework-css` Webpack task in preparation for splitting off the module.
2016-09-14 14:07:05 +02:00
filename: '[name].css',
},
module: {
loaders: [
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
{
test: /\.scss$/,
FIX Webpack handles images & fonts. Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems.
2016-08-26 05:37:43 +02:00
loader: ExtractTextPlugin.extract([
FIX: Break dist javascript and onto newlines. This doesn’t have much impact on resulting JS size, but it will hopefully make merge conflicts much less frequent. The CSS growth is a little higher (6.5% increase in size) but is not material. If this materially reduces the number of merge conflicts we have, by letting the git merge tools resolve some dist file mergers, I think it would be worth it. Some example changes in file size: bundle.js 290K -> 301K vendor.js 1,325K -> 1,321K bundle.css 628K -> 669K
2016-09-21 07:30:24 +02:00
'css?sourceMap&minimize&-core&discardComments',
FIX Webpack handles images & fonts. Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems.
2016-08-26 05:37:43 +02:00
'postcss?sourceMap',
'resolve-url',
'sass?sourceMap',
Fix webpack css config, removes duplicate css files that were generated
2016-10-28 13:51:44 +02:00
]),
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
},
{
test: /\.css$/,
FIX Webpack handles images & fonts. Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems.
2016-08-26 05:37:43 +02:00
loader: ExtractTextPlugin.extract([
FIX: Break dist javascript and onto newlines. This doesn’t have much impact on resulting JS size, but it will hopefully make merge conflicts much less frequent. The CSS growth is a little higher (6.5% increase in size) but is not material. If this materially reduces the number of merge conflicts we have, by letting the git merge tools resolve some dist file mergers, I think it would be worth it. Some example changes in file size: bundle.js 290K -> 301K vendor.js 1,325K -> 1,321K bundle.css 628K -> 669K
2016-09-21 07:30:24 +02:00
'css?sourceMap&minimize&-core&discardComments',
FIX Webpack handles images & fonts. Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems.
2016-08-26 05:37:43 +02:00
'postcss?sourceMap',
Fix webpack css config, removes duplicate css files that were generated
2016-10-28 13:51:44 +02:00
]),
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
},
FIX Webpack handles images & fonts. Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems.
2016-08-26 05:37:43 +02:00
{
test: /\.(png|gif|jpg|svg)$/,
Fix webpack css config, removes duplicate css files that were generated
2016-10-28 13:51:44 +02:00
loader: `url?limit=10000&name=../images/[name].[ext]`,
FIX Webpack handles images & fonts. Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems.
2016-08-26 05:37:43 +02:00
},
{
test: /\.(woff|eot|ttf)$/,
Fix webpack css config, removes duplicate css files that were generated
2016-10-28 13:51:44 +02:00
loader: `file?name=../fonts/[name].[ext]`,
FIX Webpack handles images & fonts. Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems.
2016-08-26 05:37:43 +02:00
},
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
],
},
postcss: [
autoprefixer({ browsers: SUPPORTED_BROWSERS }),
],
plugins: [
Fix webpack css config, removes duplicate css files that were generated
2016-10-28 13:51:44 +02:00
new ExtractTextPlugin('[name].css', { allChunks: true }),
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
],
},
{
Separate CSS bundling in Webpack Multiple entry points can't result in a single bundle.css with a fixed filename, see https://github.com/webpack/extract-text-webpack-plugin/issues/179 Until that's resolved, it's easier to keep the 'css' task separate in Webpack, and have a single entry point for all CSS (bundle.scss). Also partially reverting "Moved frontend assets into admin/ "module"", which moved too many files: debug.css and install.css need to remain as framework (not admin) deps. Split out into a separate `framework-css` Webpack task in preparation for splitting off the module.
2016-09-14 14:07:05 +02:00
name: 'framework-css',
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
entry: {
Separate CSS bundling in Webpack Multiple entry points can't result in a single bundle.css with a fixed filename, see https://github.com/webpack/extract-text-webpack-plugin/issues/179 Until that's resolved, it's easier to keep the 'css' task separate in Webpack, and have a single entry point for all CSS (bundle.scss). Also partially reverting "Moved frontend assets into admin/ "module"", which moved too many files: debug.css and install.css need to remain as framework (not admin) deps. Split out into a separate `framework-css` Webpack task in preparation for splitting off the module.
2016-09-14 14:07:05 +02:00
[`${PATHS.INSTALL_CSS_DIST}/install`]: `${PATHS.INSTALL_CSS_SRC}/install.scss`,
[`${PATHS.FRAMEWORK_CSS_DIST}/debug`]: `${PATHS.FRAMEWORK_CSS_SRC}/debug.scss`,
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
},
output: {
path: './',
filename: '[name].css',
},
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract([
FIX: Break dist javascript and onto newlines. This doesn’t have much impact on resulting JS size, but it will hopefully make merge conflicts much less frequent. The CSS growth is a little higher (6.5% increase in size) but is not material. If this materially reduces the number of merge conflicts we have, by letting the git merge tools resolve some dist file mergers, I think it would be worth it. Some example changes in file size: bundle.js 290K -> 301K vendor.js 1,325K -> 1,321K bundle.css 628K -> 669K
2016-09-21 07:30:24 +02:00
'css?sourceMap&minimize&-core&discardComments',
FIX Webpack handles images & fonts. Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems.
2016-08-26 05:37:43 +02:00
'postcss?sourceMap',
'resolve-url',
'sass?sourceMap',
Fix webpack css config, removes duplicate css files that were generated
2016-10-28 13:51:44 +02:00
]),
Separate CSS bundling in Webpack Multiple entry points can't result in a single bundle.css with a fixed filename, see https://github.com/webpack/extract-text-webpack-plugin/issues/179 Until that's resolved, it's easier to keep the 'css' task separate in Webpack, and have a single entry point for all CSS (bundle.scss). Also partially reverting "Moved frontend assets into admin/ "module"", which moved too many files: debug.css and install.css need to remain as framework (not admin) deps. Split out into a separate `framework-css` Webpack task in preparation for splitting off the module.
2016-09-14 14:07:05 +02:00
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract([
FIX: Break dist javascript and onto newlines. This doesn’t have much impact on resulting JS size, but it will hopefully make merge conflicts much less frequent. The CSS growth is a little higher (6.5% increase in size) but is not material. If this materially reduces the number of merge conflicts we have, by letting the git merge tools resolve some dist file mergers, I think it would be worth it. Some example changes in file size: bundle.js 290K -> 301K vendor.js 1,325K -> 1,321K bundle.css 628K -> 669K
2016-09-21 07:30:24 +02:00
'css?sourceMap&minimize&-core&discardComments',
Separate CSS bundling in Webpack Multiple entry points can't result in a single bundle.css with a fixed filename, see https://github.com/webpack/extract-text-webpack-plugin/issues/179 Until that's resolved, it's easier to keep the 'css' task separate in Webpack, and have a single entry point for all CSS (bundle.scss). Also partially reverting "Moved frontend assets into admin/ "module"", which moved too many files: debug.css and install.css need to remain as framework (not admin) deps. Split out into a separate `framework-css` Webpack task in preparation for splitting off the module.
2016-09-14 14:07:05 +02:00
'postcss?sourceMap',
Fix webpack css config, removes duplicate css files that were generated
2016-10-28 13:51:44 +02:00
]),
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
},
FIX Webpack handles images & fonts. Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems.
2016-08-26 05:37:43 +02:00
{
test: /\.(png|gif|jpg|svg)$/,
Fix webpack css config, removes duplicate css files that were generated
2016-10-28 13:51:44 +02:00
loader: `url?limit=10000&name=../images/[name].[ext]`,
FIX Webpack handles images & fonts. Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems.
2016-08-26 05:37:43 +02:00
},
{
test: /\.(woff|eot|ttf)$/,
Fix webpack css config, removes duplicate css files that were generated
2016-10-28 13:51:44 +02:00
loader: `file?name=../fonts/[name].[ext]`,
FIX Webpack handles images & fonts. Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems.
2016-08-26 05:37:43 +02:00
},
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
],
},
postcss: [
autoprefixer({ browsers: SUPPORTED_BROWSERS }),
],
plugins: [
FIX Webpack handles images & fonts. Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems.
2016-08-26 05:37:43 +02:00
new ExtractTextPlugin('[name].css', { allChunks: true }),
API Use Webpack The bundle is generated by running “webpack” directly - gulp is no longer needed as an intermediary. The resulting config is a lot shorter, although more configuration is pushed into lib.js. Modules are shared between javascript files as global variables. Although this global state pollution is a bit messy, I don’t think it’s practically any worse than the previous state, and it highlights the heavy coupling between the different packages we have in place. Reducing the width of the coupling between the core javascript and add-on modules would probably be a better way of dealing with this than replacing global variables with some other kind of global state. The web pack execution seems roughly twice as fast - if I clear out my framework/client/dist/js folder, it takes 13.3s to rebuild. However, it’s not rebuilding other files inside dist, only the bundle files. CSS files are now included from javascript and incorporated into bundle.css by the webpack. Although the style-loader is helpful in some dev workflows (it allows live reload), it introduces a flash of unstyled content which makes it inappropriate for production. Instead ExtractTextPlugin is used to write all the aggregated CSS into a single bundle.css file. A style-loader-based configuration could be introduced for dev environments, if we make use of the webpack live reloader in the future. Note that the following features have been removed as they don't appear to be necessary when using Webpack: - UMD module generation - thirdparty dist file copying LeftAndMain.js deps: Without it, ssui.core.js gets loaded too late, which leads e.g. to buttons being initialised without this added behaviour.
2016-08-21 03:17:50 +02:00
],
},
];
// Use WEBPACK_CHILD=js or WEBPACK_CHILD=css env var to run a single config
if (process.env.WEBPACK_CHILD) {
module.exports = config.filter((entry) => entry.name === process.env.WEBPACK_CHILD)[0];
} else {
module.exports = config;
}
Reference in New Issue Copy Permalink