Skip to content

Commit

Permalink
Merge pull request #1118 from ckeditor/t/ckeditor5-dev/371
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@Reinmar
Reinmar authored Jul 5, 2018
2 parents 29ec96f + 56e588c commit 7390460
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 67 deletions.
14 changes: 3 additions & 11 deletions docs/builds/guides/integration/advanced-setup.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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:
Expand Down
13 changes: 5 additions & 8 deletions docs/framework/guides/quick-start.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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. -->

Expand All @@ -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:
Expand Down Expand Up @@ -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):

Expand All @@ -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:
Expand Down
22 changes: 11 additions & 11 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
79 changes: 42 additions & 37 deletions scripts/docs/snippetadapter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -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;
Expand Down Expand Up @@ -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,
Expand All @@ -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).
Expand All @@ -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
} )
}
]
}
]
}
Expand Down

0 comments on commit 7390460

Please sign in to comment.