Error when moving Webpack file to another directory?

Question

JavaScript

Hello!
I have a very simple site that runs on Express, which in turn runs Webpack. I decided to transfer the files server.jsto the folder in order to clean up the project root directory a little. However, when transferring the file with the config, Webpack began to receive an error. This file works if the script that runs it is located in the folder , but is located in the root directory:webpack.config.jsscripts
server.jsscriptswebpack.config.js

'use strict';

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, 'components/main.js')
  ],
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'components/index.tpl.html',
      inject: 'body',
      filename: 'index.html'
    }),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    })
  ],
  module: {
    loaders: [{
      test: /\.js?$/,
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        "presets": ["react", "es2015", "stage-0", "react-hmre"]
      }
    }, {
      test: /\.json?$/,
      loader: 'json'
    }, {
      test: /\.css$/,
      loader: 'style!css?modules&localIdentName=[name]---[local]---[hash:base64:5]'
    }, {
      test: /\.(jpe?g|png|gif|svg)$/i,
      loaders: [
        'file?hash=sha512&digest=hex&name=[hash].[ext]',
        'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
      ]
    }]
  }
};

I tried to move the file to a folder, adding ../to all links, but I started getting the following error :

ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' /home/azat/git/azat-io/scripts/components/main.js in /home/azat/git/azat-io
 @ multi main

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Cannot resolve 'file' or 'directory' /home/azat/git/components/index.tpl.html in /home/azat/git/azat-io:
  Error: Cannot resolve 'file' or 'directory' /home/azat/git/components/index.tpl.html in /home/azat/git/azat-io
  
  - compiler.js:78 
    [azat-io]/[html-webpack-plugin]/lib/compiler.js:78:16
  
  - Compiler.js:214 Compiler.<anonymous>
    [azat-io]/[webpack]/lib/Compiler.js:214:10
  
  - Compiler.js:403 
    [azat-io]/[webpack]/lib/Compiler.js:403:12
  
  - Tapable.js:67 Compiler.next
    [azat-io]/[webpack]/[tapable]/lib/Tapable.js:67:11
  
  - CachePlugin.js:40 Compiler.<anonymous>
    [azat-io]/[webpack]/lib/CachePlugin.js:40:4
  
  - Tapable.js:71 Compiler.applyPluginsAsync
    [azat-io]/[webpack]/[tapable]/lib/Tapable.js:71:13
  
  - Compiler.js:400 Compiler.<anonymous>
    [azat-io]/[webpack]/lib/Compiler.js:400:9
  
  - Compilation.js:577 Compilation.<anonymous>
    [azat-io]/[webpack]/lib/Compilation.js:577:13
  
  - Tapable.js:60 Compilation.applyPluginsAsync
    [azat-io]/[webpack]/[tapable]/lib/Tapable.js:60:69
  
  - Compilation.js:572 Compilation.<anonymous>
    [azat-io]/[webpack]/lib/Compilation.js:572:10
  
  - Tapable.js:60 Compilation.applyPluginsAsync
    [azat-io]/[webpack]/[tapable]/lib/Tapable.js:60:69
  
  - Compilation.js:567 Compilation.<anonymous>
    [azat-io]/[webpack]/lib/Compilation.js:567:9
  
  - Tapable.js:60 Compilation.applyPluginsAsync
    [azat-io]/[webpack]/[tapable]/lib/Tapable.js:60:69
  
  - Compilation.js:563 Compilation.<anonymous>
    [azat-io]/[webpack]/lib/Compilation.js:563:8
  
  - Tapable.js:60 Compilation.applyPluginsAsync
    [azat-io]/[webpack]/[tapable]/lib/Tapable.js:60:69
  
  - Compilation.js:525 Compilation.seal
    [azat-io]/[webpack]/lib/Compilation.js:525:7
  

Child html-webpack-plugin for "index.html":
    
    ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' /home/azat/git/components/index.tpl.html in /home/azat/git/azat-io
webpack: bundle is now VALID.

Tell me how to change the Webpack file so that all links are normal and everything works. I've been stupid all day on this simple thing, but it doesn't want to work.

Answer 1

Understood.
Everything turned out to be simple. This: template: 'components/index.tpl.html',should have been replaced with this:

template: path.join(__dirname, '../components/index.tpl.html'),