Skip to content

Commit

Permalink
Merge pull request #10689 from ckeditor/ck/10668
Browse files Browse the repository at this point in the history 
Other: Project migration to webpack 5. Closes #10668.
  • Loading branch information
@pomek
pomek authored Dec 8, 2021
2 parents bed7271 + 6e81c01 commit d312ab6
Show file tree
Hide file tree
Showing 63 changed files with 318 additions and 259 deletions.
17 changes: 10 additions & 7 deletions docs/builds/guides/frameworks/react.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -392,7 +392,7 @@ Before you start modifying the webpack configuration, first install some CKEdito

```
yarn add \
raw-loader@3 \
raw-loader@4 \
@ckeditor/ckeditor5-dev-utils \
@ckeditor/ckeditor5-theme-lark \
@ckeditor/ckeditor5-react \
Expand Down Expand Up @@ -433,14 +433,17 @@ Then, add two new elements to the exported object under the `module.rules` array
}
}
},
'css-loader',
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
options: {
postcssOptions: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
}
]
},
Expand Down
18 changes: 10 additions & 8 deletions docs/builds/guides/frameworks/vuejs-v2.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,8 +201,8 @@ npm install --save \
@ckeditor/ckeditor5-vue2 \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
postcss-loader@3 \
raw-loader@0.5.1
postcss-loader@4 \
raw-loader@4
```

Edit the `vue.config.js` file and use the following configuration. If the file is not present, create it in the root of the application (i.e. next to `package.json`):
Expand Down Expand Up @@ -270,12 +270,14 @@ module.exports = {
.use( 'postcss-loader' )
.loader( 'postcss-loader' )
.tap( () => {
return styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
},
minify: true
} );
return {
postcssOptions: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
},
minify: true
} )
};
} );
}
};
Expand Down
18 changes: 10 additions & 8 deletions docs/builds/guides/frameworks/vuejs-v3.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -200,8 +200,8 @@ npm install --save \
@ckeditor/ckeditor5-vue \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
postcss-loader@3 \
raw-loader@0.5.1
postcss-loader@4 \
raw-loader@4
```

Edit the `vue.config.js` file and use the following configuration. If the file is not present, create it in the root of the application (i.e. next to `package.json`):
Expand Down Expand Up @@ -269,12 +269,14 @@ module.exports = {
.use( 'postcss-loader' )
.loader( 'postcss-loader' )
.tap( () => {
return styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
},
minify: true
} );
return {
postcssOptions: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
},
minify: true
} )
};
} );
}
};
Expand Down
69 changes: 38 additions & 31 deletions docs/builds/guides/integration/advanced-setup.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ In order to start developing CKEditor 5 you will require:

## Bundler

CKEditor 5 is currently built using [webpack@4](https://webpack.js.org). 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 in the future.
CKEditor 5 is currently built using [webpack@5](https://webpack.js.org). 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 in the future.

Therefore, **a prerequisite to this guide is that you are using webpack as your build tool**.

Expand Down Expand Up @@ -99,11 +99,12 @@ The second step is to install dependencies needed to build the editor. The list
npm install --save \
@ckeditor/ckeditor5-dev-webpack-plugin \
@ckeditor/ckeditor5-dev-utils \
postcss-loader@3 \
raw-loader@3 \
style-loader@1 \
webpack@4 \
webpack-cli@3 \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
```

### Webpack configuration
Expand Down Expand Up @@ -148,22 +149,29 @@ module.exports = {
}
}
},
'css-loader',
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
},
options: {
postcssOptions: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
}
]
}
]
}
};
```

<info-box>
If you cannot use the latest webpack (at the moment of writing this guide, it is 5), the provided configuration will also work with webpack 4.
</info-box>

#### Webpack Encore

If you use [Webpack Encore](https://github.com/symfony/webpack-encore), you can use the following configuration:
Expand Down Expand Up @@ -195,11 +203,14 @@ Encore.
.addLoader({
test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
}
} )
options: {
postcssOptions: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
} )
```

Expand Down Expand Up @@ -391,7 +402,7 @@ One of the most common requirements is to extract CKEditor 5 CSS to a separate f
```bash
npm install --save \
mini-css-extract-plugin \
css-loader
css-loader@5
```

And add it to your webpack configuration:
Expand Down Expand Up @@ -423,12 +434,14 @@ module.exports = {
'css-loader',
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
options: {
postcssOptions: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
}
]
}
Expand All @@ -445,12 +458,6 @@ CKEditor 5 is written in ECMAScript 2015 (also called ES6). All browsers in whic

However, it may happen that your environment requires ES5. For instance, if you use tools like the original [UglifyJS](https://github.com/mishoo/UglifyJS) which do not support ES6+ yet, you may need to transpile CKEditor 5 source to ES5. This will create ~80% bigger builds but will ensure that your environment can process CKEditor 5 code.

<info-box>
In the [production mode](https://webpack.js.org/concepts/mode/) webpack uses [`uglifyjs-webpack-plugin`](https://www.npmjs.com/package/uglifyjs-webpack-plugin) which supports ES6+ code. This is because it does not use the original [UglifyJS](https://github.com/mishoo/UglifyJS) plugin (which does not support ES6+), but instead it uses the [`uglify-es`](https://github.com/mishoo/UglifyJS2/tree/harmony) package.

We recommend upgrading your setup to webpack@4 and its built-in modes which allows you to avoid transpiling the source to ES5.
</info-box>

In order to create an ES5 build of CKEditor 5 you can use [Babel](https://babeljs.io/):

```bash
Expand Down
28 changes: 16 additions & 12 deletions docs/framework/guides/quick-start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ The CKEditor 5 Framework consist of several [npm packages](https://npmjs.com). T
* [Node.js](https://nodejs.org/en/) 12.0.0+
* npm 5.7.1+ (**note:** some npm 5+ versions were known to cause [problems](https://github.com/npm/npm/issues/16991), especially with deduplicating packages; upgrade npm when in doubt)

Besides Node.js and npm you also need [webpack@4](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.
Besides Node.js and npm you also need [webpack@5](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. -->

Expand All @@ -37,11 +37,12 @@ First, install packages needed to build CKEditor 5:

```bash
npm install --save \
postcss-loader@3 \
raw-loader@3 \
style-loader@1 \
webpack@4 \
webpack-cli@3
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4
```

The minimal webpack configuration needed to enable building CKEditor 5 is:
Expand Down Expand Up @@ -84,14 +85,17 @@ module.exports = {
}
}
},
'css-loader',
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
options: {
postcssOptions: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
}
]
}
Expand Down
28 changes: 16 additions & 12 deletions docs/framework/guides/tutorials/implementing-a-block-widget.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,12 @@ First, install packages needed to build and set up a basic CKEditor 5 instance.

```bash
npm install --save \
postcss-loader@3 \
raw-loader@3 \
style-loader@1 \
webpack@4 \
webpack-cli@3 \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4 \
@ckeditor/ckeditor5-dev-utils \
@ckeditor/ckeditor5-editor-classic \
@ckeditor/ckeditor5-essentials \
Expand Down Expand Up @@ -84,15 +85,18 @@ module.exports = {
}
}
},
'css-loader',
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
},
options: {
postcssOptions: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
}
]
}
]
Expand Down
28 changes: 16 additions & 12 deletions docs/framework/guides/tutorials/implementing-an-inline-widget.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,12 @@ First, install required dependencies:

```bash
npm install --save \
postcss-loader@3 \
raw-loader@3 \
style-loader@1 \
webpack@4 \
webpack-cli@3 \
css-loader@5 \
postcss-loader@4 \
raw-loader@4 \
style-loader@2 \
webpack@5 \
webpack-cli@4 \
@ckeditor/ckeditor5-basic-styles \
@ckeditor/ckeditor5-core \
@ckeditor/ckeditor5-dev-utils \
Expand Down Expand Up @@ -81,15 +82,18 @@ module.exports = {
}
}
},
'css-loader',
{
loader: 'postcss-loader',
options: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
},
options: {
postcssOptions: styles.getPostCssConfig( {
themeImporter: {
themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
},
minify: true
} )
}
}
]
}
]
Expand Down
Loading

0 comments on commit d312ab6

Please sign in to comment.