浏览代码

Updated docs.

Maciej Bukowski 7 年之前
父节点
当前提交
f463f03478
共有 2 个文件被更改,包括 26 次插入20 次删除
  1. 7 5
      docs/builds/guides/integration/advanced-setup.md
  2. 19 15
      docs/framework/guides/quick-start.md

+ 7 - 5
docs/builds/guides/integration/advanced-setup.md

@@ -109,7 +109,7 @@ npm install --save \
 You may also want to install [`uglifyjs-webpack-plugin`](https://github.com/webpack-contrib/uglifyjs-webpack-plugin) if you plan to minify ES6+ code.
 
 <info-box>
-	TODO why do we need to install it? What does webpack provides by default? Example how to load it (or link to the documentation).
+	`uglifyjs-webpack-plugin` is the default webpack minimizer used in the production mode. However, at this moment the version used in webpack is a little bit buggy and we recommend to use at least the 1.2.7 version. See https://github.com/webpack-contrib/uglifyjs-webpack-plugin#usage if you want to integrate that plugin to your build system.
 </info-box>
 
 ### Webpack configuration
@@ -252,7 +252,7 @@ This module will export an editor creator class which has all the plugins and co
 import ClassicEditor from './ckeditor';
 
 ClassicEditor
-	// Note that you do not have to specify the plugin and toolbar configuraiton — using defaults from the build.
+	// Note that you do not have to specify the plugin and toolbar configuration — using defaults from the build.
 	.create( document.querySelector( '#editor' ) )
 	.then( editor => {
 		console.log( 'Editor was initialized', editor );
@@ -343,12 +343,12 @@ Finally, you can build your application. Run webpack on your project and the edi
 One of the most common requirements is to extract CKEditor's CSS to a separate file (by default it is included in the output JavaScript file). To do that, you can use the [`extract-text-webpack-plugin`](https://www.npmjs.com/package/extract-text-webpack-plugin) plugin:
 
 ```bash
-npm install --save extract-text-webpack-plugin // TODO
+npm install --save mini-css-extract-plugin
 
 And add it to your webpack configuration:
 
 ```js
-const ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
+const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 
 module.exports = {
 	// ...
@@ -356,7 +356,9 @@ module.exports = {
 	plugins: [
 		// ...
 
-		new ExtractTextPlugin( 'styles.css' ) // TODO
+		new MiniCssExtractPlugin( {
+			filename: 'styles.css'
+		} )
 	],
 
 	module: {

+ 19 - 15
docs/framework/guides/quick-start.md

@@ -29,7 +29,7 @@ npm install --save \
 	postcss-loader \
 	raw-loader \
 	style-loader \
-	webpack@^4.15.0
+	webpack@^4.15.0 \
 	webpack-cli@^3.0.8
 ```
 
@@ -141,7 +141,7 @@ ClassicEditor
 You can now run webpack to build the application. To do that, call the `webpack` executable:
 
 ```bash
-./node_modules/.bin/webpack
+./node_modules/.bin/webpack --mode development
 ```
 
 <info-box>
@@ -151,7 +151,7 @@ You can now run webpack to build the application. To do that, call the `webpack`
 
 	```js
 	"scripts": {
-		"build": "webpack"
+		"build": "webpack --mode development"
 	}
 	```
 
@@ -164,21 +164,25 @@ You can now run webpack to build the application. To do that, call the `webpack`
 	npm adds `./node_modules/.bin/` to the `PATH` automatically, so in this case you do not need to install `webpack-cli` globally.
 </info-box>
 
+<info-box>
+	Use `--mode production` if you want to build the minified and optimized application.
+</info-box>
+
 If everything worked correctly, you should see:
 
-// TODO below
 ```
-p@m /workspace/quick-start> ./node_modules/.bin/webpack
-Hash: 3973724171776d324f0c
-Version: webpack 3.6.0
-Time: 3322ms
-        Asset     Size  Chunks                    Chunk Names
-    bundle.js  1.93 MB       0  [emitted]  [big]  main
-bundle.js.map   2.2 MB       0  [emitted]         main
- [143] (webpack)/buildin/harmony-module.js 596 bytes {0} [built]
- [249] ./app.js 546 bytes {0} [built]
- [269] (webpack)/buildin/global.js 509 bytes {0} [built]
-    + 456 hidden modules
+p@m /workspace/quick-start> ./node_modules/.bin/webpack --mode development
+Hash: c96beab038124d61568f
+Version: webpack 4.15.1
+Time: 3023ms
+Built at: 2018-07-05 17:37:38
+        Asset      Size  Chunks             Chunk Names
+    bundle.js  2.45 MiB    main  [emitted]  main
+bundle.js.map  2.39 MiB    main  [emitted]  main
+[./app.js] 638 bytes {main} [built]
+[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {main} [built]
+[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 573 bytes {main} [built]
+    + 491 hidden modules
 ```
 
 Finally, it is time to create an HTML page: