8
0
Просмотр исходного кода

Merge pull request #1118 from ckeditor/t/ckeditor5-dev/371

Other: Updated `webpack` to version 4.

BREAKING CHANGE: CKEditor 5 environment was updated to use `webpack@4`. `webpack@4` introduced major changes in its configuration and plugin system. CKEditor 5 tools and build configuration were updated to work with `webpack@4` now and will not work with `webpack@3.
Piotrek Koszuliński 7 лет назад
Родитель
Сommit
7390460f0e

+ 3 - 11
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**.
 
-<info-box warning>
-	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.
-</info-box>
-
 ## 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.
 
-<info-box warning>
-	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).
-</info-box>
-
 ### Webpack configuration
 
 You can now configure webpack. There are a couple of things that you need to take care of when building CKEditor:

+ 5 - 8
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.
-
-<info-box warning>
-	Unfortunately, at the moment of writing this note, [webpack@4.x causes issues](https://github.com/ckeditor/ckeditor5-dev/issues/371).
-</info-box>
+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.
 
 <!-- TODO replace the link above when the Framework will get its own building 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`
 ```
 
 <info-box>
-	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.
 </info-box>
 
 If everything worked correctly, you should see:

+ 11 - 11
package.json

@@ -65,27 +65,27 @@
   },
   "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",
-    "babel-minify-webpack-plugin": "^0.3.0",
+    "@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",
-    "extract-text-webpack-plugin": "^3.0.2",
     "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.4.0",
     "minimatch": "^3.0.4",
-    "postcss-loader": "^2.0.10",
+    "postcss-loader": "^2.1.5",
     "raw-loader": "^0.5.1",
-    "style-loader": "^0.20.3",
+    "style-loader": "^0.21.0",
+    "uglifyjs-webpack-plugin": "^1.2.7",
     "umberto": "^0.6.0",
-    "webpack": "^3.11.0",
-    "webpack-sources": "1.0.1"
+    "webpack": "^4.15.0"
   },
   "engines": {
     "node": ">=6.0.0",

+ 42 - 37
scripts/docs/snippetadapter.js

@@ -10,8 +10,8 @@ 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 BabelMinifyPlugin = require( 'babel-minify-webpack-plugin' );
+const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
+const UglifyJsWebpackPlugin = require( 'uglifyjs-webpack-plugin' );
 
 const webpackProcesses = new Map();
 
@@ -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;
@@ -79,26 +79,9 @@ module.exports = function snippetAdapter( data ) {
 };
 
 function getWebpackConfig( config ) {
-	const plugins = [
-		new ExtractTextPlugin( 'snippet.css' ),
-		new CKEditorWebpackPlugin( {
-			language: config.language || 'en'
-		} ),
-		new webpack.BannerPlugin( {
-			banner: bundler.getLicenseBanner(),
-			raw: true
-		} )
-	];
-
-	if ( config.minify ) {
-		plugins.push(
-			new BabelMinifyPlugin( null, {
-				comments: false
-			} )
-		);
-	}
-
 	return {
+		mode: config.production ? 'production' : 'development',
+
 		devtool: 'source-map',
 
 		entry: config.entry,
@@ -108,7 +91,30 @@ function getWebpackConfig( config ) {
 			filename: 'snippet.js'
 		},
 
-		plugins,
+		optimization: {
+			minimizer: [
+				new UglifyJsWebpackPlugin( {
+					sourceMap: true,
+					uglifyOptions: {
+						output: {
+							// Preserve license comments starting with an exclamation mark.
+							comments: /^!/
+						}
+					}
+				} )
+			]
+		},
+
+		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).
@@ -128,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.minify
-								} )
-							}
-						]
-					} )
+					use: [
+						MiniCssExtractPlugin.loader,
+						'css-loader',
+						{
+							loader: 'postcss-loader',
+							options: styles.getPostCssConfig( {
+								themeImporter: {
+									themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
+								},
+								minify: config.production
+							} )
+						}
+					]
 				}
 			]
 		}