Internal: Implement webpack-dev-server

package.json

@@ -57,7 +57,8 @@
     "style-loader": "^1.0.0",
     "terser-webpack-plugin": "^2.2.1",
     "webpack": "^4.39.1",
-    "webpack-cli": "^3.3.6"
+    "webpack-cli": "^3.3.6",
+    "webpack-dev-server": "^3.9.0"
   },
   "engines": {
     "node": ">=8.0.0",
@@ -72,6 +73,7 @@
     "url": "https://github.com/ckeditor/ckeditor5-build-classic.git"
   },
   "scripts": {
+    "start": "webpack-dev-server",
     "build": "webpack --mode production",
     "lint": "eslint --quiet '**/*.js'",
     "stylelint": "stylelint --quiet --allow-empty-input 'theme/**/*.css' 'docs/**/*.css'",

sample/index.html

@@ -20,13 +20,13 @@ <h2>Sample</h2>
 	<p>This is an instance of the <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/overview.html#classic-editor">classic editor build</a>.</p>
 
 	<figure class="image">
-		<img src="../tests/manual/sample.jpg" alt="Autumn fields" />
+		<img src="/manual/sample.jpg" alt="Autumn fields" />
 	</figure>
 
 	<p>You can use this sample to validate whether your <a href="https://ckeditor.com/docs/ckeditor5/latest/builds/guides/development/custom-builds.html">custom build</a> works fine.</p>
 </div>
 
-<script src="../build/ckeditor.js"></script>
+<script src="/assets/ckeditor.js"></script>
 <script>
 	ClassicEditor.create( document.querySelector( '#editor' ) )
 		.then( editor => {

webpack.config.js

@@ -29,6 +29,16 @@ module.exports = {
 		libraryExport: 'default'
 	},
 
+	devServer: {
+		publicPath: '/assets/',
+		contentBase: [
+			path.resolve( __dirname, 'sample' ),
+			path.resolve( __dirname, 'tests' ),
+		],
+		watchContentBase: true,
+		compress: true
+	},
+
 	optimization: {
 		minimizer: [
 			new TerserPlugin( {