HM-22. Добавлено в Webpack dev-server clean, загрузка картинок и шрифтов (#1)

.gitignore

@@ -1,4 +1,4 @@
 .vscode
 .idea
 /dist
-/node-modules
+/node_modules

package.json

@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "webpack"
+    "build": "webpack --mode=production"
   },
   "repository": {
     "type": "git",
@@ -21,10 +21,15 @@
     "@babel/core": "^7.10.4",
     "@babel/preset-env": "^7.10.4",
     "babel-loader": "^8.1.0",
+    "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.6.0",
+    "file-loader": "^6.0.0",
     "html-webpack-plugin": "^4.3.0",
+    "image-webpack-loader": "^6.0.0",
     "mini-css-extract-plugin": "^0.9.0",
+    "url-loader": "^4.1.0",
     "webpack": "^4.43.0",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   }
 }

src/app.js

@@ -0,0 +1 @@
+import './app.css';

src/index.js

@@ -1 +0,0 @@
-import './app.css';

webpack.config.js

@@ -1,17 +1,23 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const {CleanWebpackPlugin} = require('clean-webpack-plugin');
 
 module.exports = {
-  entry: './src/index.js',
+  entry: './src/app.js',
   output: {
     filename: 'main.js',
     path: path.resolve(__dirname, 'dist'),
   },
+  devServer: {
+    compress: true,
+    port: 9000
+  },
   plugins: [
+    new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
       filename: 'index.html',
-      template: './src/index.html'
+      template: './src/app.html'
     }),
     new MiniCssExtractPlugin({
       filename: 'style.css',
@@ -23,7 +29,31 @@ module.exports = {
         test: /\.css$/i,
         use: [MiniCssExtractPlugin.loader, 'css-loader'],
       },
-      { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
+      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},
+      {
+        test: /\.(gif|png|jpe?g|svg)$/i,
+        use: [
+          {
+            loader: 'image-webpack-loader',
+            options: {
+
+              quality: 80
+            },
+          },
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 200000,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(woff|woff2|eot|ttf|otf)$/,
+        use: [
+          'file-loader',
+        ],
+      },
     ],
   },
 };