From 55710896980b44ef94bd89b6b41f1d0e67bb92d0 Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Wed, 7 Mar 2018 11:56:29 +0100 Subject: [PATCH 01/11] Upgraded webpack to 4.1.0. WIP. --- package.json | 7 +++---- scripts/docs/snippetadapter.js | 12 +++++++++--- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/package.json b/package.json index 53cfa9c2848..0f162b556f3 100644 --- a/package.json +++ b/package.json @@ -72,19 +72,18 @@ "babel-minify-webpack-plugin": "^0.3.0", "eslint": "^4.15.0", "eslint-config-ckeditor5": "^1.0.7", - "extract-text-webpack-plugin": "^3.0.2", + "extract-text-webpack-plugin": "^4.0.0-beta.0", "glob": "^7.1.2", "husky": "^0.14.3", "lerna": "^2.2.0", "lint-staged": "^7.0.0", "mgit2": "^0.8.0", "minimatch": "^3.0.4", - "postcss-loader": "^2.0.10", + "postcss-loader": "^2.1.1", "raw-loader": "^0.5.1", "style-loader": "^0.20.3", "umberto": "^0.6.0", - "webpack": "^3.11.0", - "webpack-sources": "1.0.1" + "webpack": "^4.1.0" }, "engines": { "node": ">=6.0.0", diff --git a/scripts/docs/snippetadapter.js b/scripts/docs/snippetadapter.js index fbde01a2b0c..0c1f72cd9be 100644 --- a/scripts/docs/snippetadapter.js +++ b/scripts/docs/snippetadapter.js @@ -27,7 +27,7 @@ module.exports = function snippetAdapter( data ) { entry: data.snippetSource.js, outputPath, language: snippetConfig.language, - minify: data.options.production + production: data.options.production } ); let promise; @@ -90,7 +90,7 @@ function getWebpackConfig( config ) { } ) ]; - if ( config.minify ) { + if ( config.production ) { plugins.push( new BabelMinifyPlugin( null, { comments: false @@ -99,6 +99,12 @@ function getWebpackConfig( config ) { } return { + mode: config.production ? 'production' : 'development', + + optimization: { + minimize: false + }, + devtool: 'source-map', entry: config.entry, @@ -137,7 +143,7 @@ function getWebpackConfig( config ) { themeImporter: { themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ) }, - minify: config.minify + minify: config.production } ) } ] From 5ef4fb4b4201dc2777d192ee9bec5a08aaa8aba1 Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Thu, 22 Mar 2018 14:57:57 +0100 Subject: [PATCH 02/11] Replaced webpack-text-extract-plugin with mini-css-extract-plugin. --- package.json | 2 +- scripts/docs/snippetadapter.js | 31 +++++++++++++++---------------- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 0f162b556f3..00b0beb0240 100644 --- a/package.json +++ b/package.json @@ -72,12 +72,12 @@ "babel-minify-webpack-plugin": "^0.3.0", "eslint": "^4.15.0", "eslint-config-ckeditor5": "^1.0.7", - "extract-text-webpack-plugin": "^4.0.0-beta.0", "glob": "^7.1.2", "husky": "^0.14.3", "lerna": "^2.2.0", "lint-staged": "^7.0.0", "mgit2": "^0.8.0", + "mini-css-extract-plugin": "^0.2.0", "minimatch": "^3.0.4", "postcss-loader": "^2.1.1", "raw-loader": "^0.5.1", diff --git a/scripts/docs/snippetadapter.js b/scripts/docs/snippetadapter.js index 0c1f72cd9be..ddf9fb9059d 100644 --- a/scripts/docs/snippetadapter.js +++ b/scripts/docs/snippetadapter.js @@ -10,7 +10,7 @@ const fs = require( 'fs' ); const webpack = require( 'webpack' ); const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' ); const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' ); -const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); +const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); const BabelMinifyPlugin = require( 'babel-minify-webpack-plugin' ); const webpackProcesses = new Map(); @@ -80,7 +80,7 @@ module.exports = function snippetAdapter( data ) { function getWebpackConfig( config ) { const plugins = [ - new ExtractTextPlugin( 'snippet.css' ), + new MiniCssExtractPlugin( { filename: 'snippet.css' } ), new CKEditorWebpackPlugin( { language: config.language || 'en' } ), @@ -134,20 +134,19 @@ function getWebpackConfig( config ) { }, { test: /\.css$/, - use: ExtractTextPlugin.extract( { - fallback: 'style-loader', - use: [ - { - loader: 'postcss-loader', - options: styles.getPostCssConfig( { - themeImporter: { - themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ) - }, - minify: config.production - } ) - } - ] - } ) + use: [ + MiniCssExtractPlugin.loader, + 'css-loader', + { + loader: 'postcss-loader', + options: styles.getPostCssConfig( { + themeImporter: { + themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ) + }, + minify: config.production + } ) + } + ] } ] } From 5540a7b65c918742c924a4cd28bc6b670f6f33c7 Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Tue, 5 Jun 2018 15:07:53 +0200 Subject: [PATCH 03/11] Removed webpack-sources. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 00b0beb0240..c6b4be5f18f 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,7 @@ "raw-loader": "^0.5.1", "style-loader": "^0.20.3", "umberto": "^0.6.0", - "webpack": "^4.1.0" + "webpack": "^4.2.0" }, "engines": { "node": ">=6.0.0", From 5186d104ed4ca64c4eaafa31e99d39616bbf8ead Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Thu, 21 Jun 2018 16:08:40 +0200 Subject: [PATCH 04/11] Upgraded webpack to version 4.12.0. --- package.json | 6 +++--- scripts/docs/snippetadapter.js | 18 ++++++++++-------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index c6b4be5f18f..2c4048f1c49 100644 --- a/package.json +++ b/package.json @@ -69,7 +69,6 @@ "@ckeditor/ckeditor5-dev-tests": "^11.0.2", "@ckeditor/ckeditor5-dev-utils": "^9.0.1", "@ckeditor/ckeditor5-dev-webpack-plugin": "^5.0.1", - "babel-minify-webpack-plugin": "^0.3.0", "eslint": "^4.15.0", "eslint-config-ckeditor5": "^1.0.7", "glob": "^7.1.2", @@ -77,13 +76,14 @@ "lerna": "^2.2.0", "lint-staged": "^7.0.0", "mgit2": "^0.8.0", - "mini-css-extract-plugin": "^0.2.0", + "mini-css-extract-plugin": "^0.4.0", "minimatch": "^3.0.4", "postcss-loader": "^2.1.1", "raw-loader": "^0.5.1", "style-loader": "^0.20.3", + "uglifyjs-webpack-plugin": "^1.2.6", "umberto": "^0.6.0", - "webpack": "^4.2.0" + "webpack": "^4.12.0" }, "engines": { "node": ">=6.0.0", diff --git a/scripts/docs/snippetadapter.js b/scripts/docs/snippetadapter.js index ddf9fb9059d..c3b97b4a7e2 100644 --- a/scripts/docs/snippetadapter.js +++ b/scripts/docs/snippetadapter.js @@ -11,7 +11,7 @@ const webpack = require( 'webpack' ); const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' ); const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' ); const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); -const BabelMinifyPlugin = require( 'babel-minify-webpack-plugin' ); +const UglifyJsWebpackPlugin = require( 'uglifyjs-webpack-plugin' ); const webpackProcesses = new Map(); @@ -90,10 +90,12 @@ function getWebpackConfig( config ) { } ) ]; + const minimizer = []; + if ( config.production ) { - plugins.push( - new BabelMinifyPlugin( null, { - comments: false + minimizer.push( + new UglifyJsWebpackPlugin( { + sourceMap: true } ) ); } @@ -101,10 +103,6 @@ function getWebpackConfig( config ) { return { mode: config.production ? 'production' : 'development', - optimization: { - minimize: false - }, - devtool: 'source-map', entry: config.entry, @@ -114,6 +112,10 @@ function getWebpackConfig( config ) { filename: 'snippet.js' }, + optimization: { + minimizer + }, + plugins, // Configure the paths so building CKEditor 5 snippets work even if the script From 0ca83edf6a800d40f98b0a33ad067a675111ced2 Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Thu, 28 Jun 2018 16:04:50 +0200 Subject: [PATCH 05/11] Added css-loader for building docs. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 2c4048f1c49..920fb8c116b 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "@ckeditor/ckeditor5-dev-tests": "^11.0.2", "@ckeditor/ckeditor5-dev-utils": "^9.0.1", "@ckeditor/ckeditor5-dev-webpack-plugin": "^5.0.1", + "css-loader": "^0.28.11", "eslint": "^4.15.0", "eslint-config-ckeditor5": "^1.0.7", "glob": "^7.1.2", From 48e37ef1c27e98c6e04962a61944dd0989341cc4 Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Thu, 28 Jun 2018 16:24:44 +0200 Subject: [PATCH 06/11] Bumped up deps. --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 920fb8c116b..b7d011ded69 100644 --- a/package.json +++ b/package.json @@ -79,12 +79,12 @@ "mgit2": "^0.8.0", "mini-css-extract-plugin": "^0.4.0", "minimatch": "^3.0.4", - "postcss-loader": "^2.1.1", + "postcss-loader": "^2.1.5", "raw-loader": "^0.5.1", - "style-loader": "^0.20.3", - "uglifyjs-webpack-plugin": "^1.2.6", + "style-loader": "^0.21.0", + "uglifyjs-webpack-plugin": "^1.2.7", "umberto": "^0.6.0", - "webpack": "^4.12.0" + "webpack": "^4.12.2" }, "engines": { "node": ">=6.0.0", From 0b4790eb29c0b8cc0193900ed14a451f91a052a8 Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Thu, 28 Jun 2018 16:32:29 +0200 Subject: [PATCH 07/11] Updated docs. --- docs/builds/guides/integration/advanced-setup.md | 14 +++----------- docs/framework/guides/quick-start.md | 13 +++++-------- 2 files changed, 8 insertions(+), 19 deletions(-) diff --git a/docs/builds/guides/integration/advanced-setup.md b/docs/builds/guides/integration/advanced-setup.md index bd7a7e5328e..13600c4fb21 100644 --- a/docs/builds/guides/integration/advanced-setup.md +++ b/docs/builds/guides/integration/advanced-setup.md @@ -19,14 +19,10 @@ In order to start developing CKEditor 5 you will require: ## Bundler -CKEditor 5 is currently built using [webpack](https://webpack.js.org) (>=3.x.x). All builds, examples and demos are generated using this bundler. It should also be possible to build CKEditor using other bundlers (if they are configured properly), such as [Rollup](https://github.com/rollup/rollup) or [Browserify](http://browserify.org/), but these setups are not officially supported yet. Also, the [`@ckeditor/ckeditor5-dev-webpack-plugin`](https://www.npmjs.com/package/@ckeditor/ckeditor5-dev-webpack-plugin) that allows to localize the editor is only available for webpack. More work on this subject will be done after v1.0.0. +CKEditor 5 is currently built using [webpack](https://webpack.js.org) (>=4.x.x). All builds, examples and demos are generated using this bundler. It should also be possible to build CKEditor using other bundlers (if they are configured properly), such as [Rollup](https://github.com/rollup/rollup) or [Browserify](http://browserify.org/), but these setups are not officially supported yet. Also, the [`@ckeditor/ckeditor5-dev-webpack-plugin`](https://www.npmjs.com/package/@ckeditor/ckeditor5-dev-webpack-plugin) that allows to localize the editor is only available for webpack. More work on this subject will be done after v1.0.0. Therefore, **a prerequisite to this guide is that you are using webpack as your build tool**. - - Unfortunately, at the moment of writing this note, [webpack@4.x causes issues](https://github.com/ckeditor/ckeditor5-dev/issues/371) so the recommended version is webpack@3.x. - - ## Scenario 1: Integrating existing builds This is the simplest scenario. It assumes that you want to use {@link builds/guides/overview#available-builds one of the existing builds} "as-is" (you can, of course, still {@link builds/guides/integration/configuration configure the editor}). It also gives the fastest build times. @@ -106,16 +102,12 @@ npm install --save \ postcss-loader \ raw-loader \ style-loader \ - webpack@^3.11.0 \ - webpack-sources@1.0.1 + webpack@^4.12.2 \ + webpack-cli@^3.0.8 \ ``` You may also want to install [`babel-minify-webpack-plugin`](https://github.com/webpack-contrib/babel-minify-webpack-plugin) if you plan to minify ES6+ code. - - Unfortunately, at the moment of writing this note, [webpack@4.x causes issues](https://github.com/ckeditor/ckeditor5-dev/issues/371). Hence, webpack@3.x is used in the scenario above. Additionally, webpack-sources@1.0.1 [is needed due to another issue](https://github.com/ckeditor/ckeditor5/issues/658). - - ### Webpack configuration You can now configure webpack. There are a couple of things that you need to take care of when building CKEditor: diff --git a/docs/framework/guides/quick-start.md b/docs/framework/guides/quick-start.md index 6c645b7e5ee..03796262c36 100644 --- a/docs/framework/guides/quick-start.md +++ b/docs/framework/guides/quick-start.md @@ -14,11 +14,7 @@ The framework is made of several [npm packages](https://npmjs.com). To install i * [Node.js](https://nodejs.org/en/) >= 6.0.0 * npm 4.x (**note:** using npm 5 [is not recommended](https://github.com/npm/npm/issues/16991)) -Besides Node.js and npm you also need [webpack@3.x](https://webpack.js.org) with a few additional packages to use the framework. They are needed to bundle the source code. Read more about building CKEditor 5 in the {@link builds/guides/integration/advanced-setup CKEditor 5 Builds Advanced setup} guide. - - - Unfortunately, at the moment of writing this note, [webpack@4.x causes issues](https://github.com/ckeditor/ckeditor5-dev/issues/371). - +Besides Node.js and npm you also need [webpack@4.x](https://webpack.js.org) with a few additional packages to use the framework. They are needed to bundle the source code. Read more about building CKEditor 5 in the {@link builds/guides/integration/advanced-setup CKEditor 5 Builds Advanced setup} guide. @@ -33,7 +29,8 @@ npm install --save \ postcss-loader \ raw-loader \ style-loader \ - webpack@^3.11.0 + webpack@^4.12.2 + webpack-cli@^3.0.8 ``` The minimal webpack configuration needed to enable building CKEditor 5 is: @@ -148,7 +145,7 @@ You can now run webpack to build the application. To do that, call the `webpack` ``` - You can also install webpack globally (using `npm install -g`) and run it via a globally available `webpack`. + You can also install `webpack-cli` globally (using `npm install -g`) and run it via a globally available `webpack`. Alternatively, you can add it as an [npm script](https://docs.npmjs.com/misc/scripts): @@ -164,7 +161,7 @@ You can now run webpack to build the application. To do that, call the `webpack` npm run build ``` - npm adds `./node_modules/.bin/` to the `PATH` automatically, so in this case you do not need to install webpack globally. + npm adds `./node_modules/.bin/` to the `PATH` automatically, so in this case you do not need to install `webpack-cli` globally. If everything worked correctly, you should see: From d47cfc5b685d0f21179df025830efe2805e50718 Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Thu, 28 Jun 2018 17:13:10 +0200 Subject: [PATCH 08/11] Updated uglifyjs config. --- scripts/docs/snippetadapter.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/scripts/docs/snippetadapter.js b/scripts/docs/snippetadapter.js index c3b97b4a7e2..656420079c3 100644 --- a/scripts/docs/snippetadapter.js +++ b/scripts/docs/snippetadapter.js @@ -95,7 +95,12 @@ function getWebpackConfig( config ) { if ( config.production ) { minimizer.push( new UglifyJsWebpackPlugin( { - sourceMap: true + sourceMap: true, + uglifyOptions: { + output: { + comments: /^\**!/ + } + } } ) ); } From 5b11a159f542e5f7892a352462399180ddc69925 Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Tue, 3 Jul 2018 13:42:52 +0200 Subject: [PATCH 09/11] Simplified snippet adapter. --- scripts/docs/snippetadapter.js | 49 +++++++++++++++------------------- 1 file changed, 21 insertions(+), 28 deletions(-) diff --git a/scripts/docs/snippetadapter.js b/scripts/docs/snippetadapter.js index 656420079c3..1b3a4987ba0 100644 --- a/scripts/docs/snippetadapter.js +++ b/scripts/docs/snippetadapter.js @@ -79,32 +79,6 @@ module.exports = function snippetAdapter( data ) { }; function getWebpackConfig( config ) { - const plugins = [ - new MiniCssExtractPlugin( { filename: 'snippet.css' } ), - new CKEditorWebpackPlugin( { - language: config.language || 'en' - } ), - new webpack.BannerPlugin( { - banner: bundler.getLicenseBanner(), - raw: true - } ) - ]; - - const minimizer = []; - - if ( config.production ) { - minimizer.push( - new UglifyJsWebpackPlugin( { - sourceMap: true, - uglifyOptions: { - output: { - comments: /^\**!/ - } - } - } ) - ); - } - return { mode: config.production ? 'production' : 'development', @@ -118,10 +92,29 @@ function getWebpackConfig( config ) { }, optimization: { - minimizer + minimizer: [ + new UglifyJsWebpackPlugin( { + sourceMap: true, + uglifyOptions: { + output: { + // Preserve license comments starting with an exclamation mark. + comments: /^!/ + } + } + } ) + ] }, - plugins, + plugins: [ + new MiniCssExtractPlugin( { filename: 'snippet.css' } ), + new CKEditorWebpackPlugin( { + language: config.language || 'en' + } ), + new webpack.BannerPlugin( { + banner: bundler.getLicenseBanner(), + raw: true + } ) + ], // Configure the paths so building CKEditor 5 snippets work even if the script // is triggered from a directory outside ckeditor5 (e.g. multi-project case). From 14f70f57f61c8d5200d43c22d73a58ac09102c70 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Thu, 5 Jul 2018 13:45:25 +0200 Subject: [PATCH 10/11] Webpack up. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d8e2fdd45c4..090dce09b81 100644 --- a/package.json +++ b/package.json @@ -85,7 +85,7 @@ "style-loader": "^0.21.0", "uglifyjs-webpack-plugin": "^1.2.7", "umberto": "^0.6.0", - "webpack": "^4.12.2" + "webpack": "^4.15.0" }, "engines": { "node": ">=6.0.0", From 56e588c3396110dc4419788b6d51756f38328f97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Thu, 5 Jul 2018 14:17:27 +0200 Subject: [PATCH 11/11] Bump x5. --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 090dce09b81..f469907ef2c 100644 --- a/package.json +++ b/package.json @@ -65,11 +65,11 @@ }, "devDependencies": { "@ckeditor/ckeditor5-collaboration": "^10.0.1", - "@ckeditor/ckeditor5-dev-docs": "^9.0.2", - "@ckeditor/ckeditor5-dev-env": "^10.0.0", - "@ckeditor/ckeditor5-dev-tests": "^11.0.2", - "@ckeditor/ckeditor5-dev-utils": "^9.0.1", - "@ckeditor/ckeditor5-dev-webpack-plugin": "^5.0.1", + "@ckeditor/ckeditor5-dev-docs": "^9.0.4", + "@ckeditor/ckeditor5-dev-env": "^11.0.0", + "@ckeditor/ckeditor5-dev-tests": "^12.0.0", + "@ckeditor/ckeditor5-dev-utils": "^10.0.0", + "@ckeditor/ckeditor5-dev-webpack-plugin": "^6.0.0", "css-loader": "^0.28.11", "eslint": "^4.15.0", "eslint-config-ckeditor5": "^1.0.7",