I get errors in npm, how to fix them?

Question

npm

I ran into such a problem, I don’t know how to solve it, I can’t find anything on the Internet either, I started learning Webpack from scratch. I'm trying to transfer the first, small portfolio project from gulp to webpack.

$ npm run build                                                                    
> [email protected] build C:\localserver\OSPanel\domains
\project__gulp                                            
> webpack --mode production                                                         
(node:5048) DeprecationWarning: Tapable.plugin is deprecat
ed. Use new API on `.hooks` instead                       
(node:5048) DeprecationWarning: Chunk.mapModules: Use Arra
y.from(chunk.modulesIterable, fn) instead                 
Hash: 76b480f5e9577598b50b                                
Version: webpack 4.25.1                                   
Time: 3536ms                                              
Built at: 2018-11-09 13:29:59                             
 3 assets                                                 
Entrypoint main = style.64d6974be4e0a0739cf3.css main.4f8c
417cba5542e22182.js                                       
[0] ./src/index.js 43 bytes {0} [built]                   
[1] ./src/scss/main.scss 1.36 KiB {0} [built]             
[2] ./node_modules/mini-css-extract-plugin/dist/loader.js!
./node_modules/css-loader!./node_modules/sass-loader/lib/l
oader.js!./src/scss/main.scss 39 bytes {0} [built]        
    + 4 hidden modules                                           
ERROR in   Error: Child compilation failed:               
  Module build failed (from ./node_modules/html-webpack-pl
ugin/lib/loader.js):                                      
  SyntaxError: Invalid or unexpected token                                
  - Function                                                     
  - lodash.js:4605 Function.template                      
    [project__gulp]/[lodash]/dist/lodash.js:4605:20                                  
  - SyntaxError: Invalid or unexpected token                          
  - compiler.js:79 childCompiler.runAsChild               
    [project__gulp]/[html-webpack-plugin]/lib/compiler.js:
79:16                                                                            
  - Compiler.js:296 compile                               
    [project__gulp]/[webpack]/lib/Compiler.js:296:11                                   
  - Compiler.js:552 hooks.afterCompile.callAsync.err      
    [project__gulp]/[webpack]/lib/Compiler.js:552:14                                       
  - Hook.js:154 AsyncSeriesHook.lazyCompileHook           
    [project__gulp]/[tapable]/lib/Hook.js:154:20                                                
  - Compiler.js:549 compilation.seal.err                  
    [project__gulp]/[webpack]/lib/Compiler.js:549:30                                                                               
    [project__gulp]/[webpack]/lib/Compilation.js:1314:32                                     
  - index.js:287                                          
    [project__gulp]/[uglifyjs-webpack-plugin]/dist/index.j
s:287:11                                                                                       
  - Runner.js:67 Runner.runTasks                          
    [project__gulp]/[uglifyjs-webpack-plugin]/dist/uglify/
Runner.js:67:9                                                                                   
  - index.js:198 UglifyJsPlugin.optimizeFn                
    [project__gulp]/[uglifyjs-webpack-plugin]/dist/index.j
s:198:16                                                                                                                            
Child html-webpack-plugin for "index.html":               
     1 asset                                              
    Entrypoint undefined = index.html                     
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!.
/src/index.html 431 bytes {0} [built] [failed] [1 error]               
    ERROR in ./src/index.html (./node_modules/html-webpack
-plugin/lib/loader.js!./src/index.html)                               
    SyntaxError: Invalid or unexpected token              
        at Function (<anonymous>)                         
        at Function.template (C:\localserver\OSPanel\domai
ns\project__gulp\node_modules\lodash\dist\lodash.js:4605:2
0)                                                        
        at Object.module.exports (C:\localserver\OSPanel\d
omains\project__gulp\node_modules\html-webpack-plugin\lib\
loader.js:28:22)                                          
Child mini-css-extract-plugin node_modules/css-loader/inde
x.js!node_modules/sass-loader/lib/loader.js!src/scss/main.
scss:                                                     
    Entrypoint mini-css-extract-plugin = *                
    [0] ./node_modules/css-loader!./node_modules/sass-load
er/lib/loader.js!./src/scss/main.scss 51.9 KiB {0} [built]             
    [3] ./src/images/header__bkg.png 2.32 MiB {0} [built] 
       + 2 hidden modules                                 
npm ERR! code ELIFECYCLE                                  
npm ERR! errno 2                                          
npm ERR! [email protected] build: `webpack --mode produc
tion`                                                     
npm ERR! Exit status 2                                    
npm ERR!                                                  
npm ERR! Failed at the [email protected] build script.  
npm ERR! This is probably not a problem with npm. There is
 likely additional logging output above.                                                              
npm ERR! A complete log of this run can be found in:      
npm ERR!     C:\Users\alex2\AppData\Roaming\npm-cache\_log
s\2018-11-09T10_29_59_849Z-debug.log

Here is webpack.config.js:

// basick vars
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//module setting
let conf = {
  entry: './src/index.js',
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist'
  },
  devServer: {
    overlay: true
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: '/node_modules/',
        use: {
          loader: 'babel-loader', 
        }
      },
      {
        test: /\.scss$/, 
        use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader' ]				
      },
      {
        test: /\.(jpg|png|gif)$/,
    			include: /images/,
    			loader: 'url-loader'
      }
    ]
  },
  
  plugins: [
    new MiniCssExtractPlugin({
      		filename: 'style.[contenthash].css'
    	}),
    new HtmlWebpackPlugin({
      inject: false,
      hash: true,
      template: './src/index.html',
      filename: 'index.html'
    }),
    new WebpackMd5Hash(),
  ]
};
  module.exports = conf;

Here is package.json:

{
  "name": "project__gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production",
    "dev": "webpack-dev-server --mode development --open"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/LehaRybkoha/GitRepository.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/LehaRybkoha/GitRepository/issues"
  },
  "homepage": "https://github.com/LehaRybkoha/GitRepository#readme",
  "devDependencies": {
    "autoprefixer": "^9.3.1",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-3": "^6.24.1",
    "browser-sync": "^2.24.7",
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^1.0.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "gulp": "^3.9.1",
    "gulp-cache": "^1.0.2",
    "gulp-clean-css": "^3.10.0",
    "gulp-if": "^2.0.2",
    "gulp-sass": "^4.0.1",
    "gulp-uglify": "^3.0.1",
    "gulp-useref": "^3.1.5",
    "html-webpack-plugin": "^3.2.0",
    "jshint-loader": "^0.8.4",
    "mini-css-extract-plugin": "^0.4.4",
    "node-sass": "^4.10.0",
    "node-static": "^0.7.11",
    "path": "^0.12.7",
    "postcss-loader": "^3.0.0",
    "run-sequence": "^2.2.1",
    "sass-loader": "^7.1.0",
    "scss-loader": "0.0.1",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.10",
    "webpack-md5-hash": "0.0.6"
  },
  "dependencies": {
    "gulp-minify-css": "^1.2.4",
    "jquery": "^3.3.1",
    "owl.carousel": "^2.3.4"
  }
}

Here are the links and scripts index.html (the whole index will not fit):

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Web-site</title>
<link rel="stylesheet" href="<%=htmlWebpackPlugin.files.chunks.main.css %">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600,700,800,900&amp;subset=cyrillic" rel="stylesheet">

  <link href="https://fonts.googleapis.com/css?family=Roboto+Slab&amp;subset=cyrillic" rel="stylesheet">
</head>

<script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
</body>
</html>

And the path to the scss file is registered in index.js