Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update webpack to version 4.12 #1118

Merged
merged 12 commits into from
Jul 5, 2018
+61 −67
Merged

Update webpack to version 4.12 #1118

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5571089
Upgraded webpack to 4.1.0. WIP.
ma2ciek Mar 7, 2018
5ef4fb4
Replaced webpack-text-extract-plugin with mini-css-extract-plugin.
ma2ciek Mar 22, 2018
5540a7b
Removed webpack-sources.
ma2ciek Jun 5, 2018
5186d10
Upgraded webpack to version 4.12.0.
ma2ciek Jun 21, 2018
0ca83ed
Added css-loader for building docs.
ma2ciek Jun 28, 2018
48e37ef
Bumped up deps.
ma2ciek Jun 28, 2018
0b4790e
Updated docs.
ma2ciek Jun 28, 2018
d47cfc5
Updated uglifyjs config.
ma2ciek Jun 28, 2018
5b11a15
Simplified snippet adapter.
ma2ciek Jul 3, 2018
d1e7c98
Merge branch 'master' into t/ckeditor5-dev/371
Reinmar Jul 5, 2018
14f70f5
Webpack up.
Reinmar Jul 5, 2018
56e588c
Bump x5.
Reinmar Jul 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 3 additions & 11 deletions docs/builds/guides/integration/advanced-setup.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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