Error: Cannot resolve 'file' or 'directory' in configuring webpack for my typescript application

Question

I am trying to configure the web pack for my typescript demo application. When I give webpack command it is trowing following errors

    ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./src/app.ts in D:\ts1
    resolve file
    D:\ts1\src\app.ts  doesn't exist
    D:\ts1\src\app.ts.ts doesn't exist
    D:\ts1\src\app.ts.html doesn't exist
    D:\ts1\src\app.ts.js doesn't exist
    resolve directory
    D:\ts1\src\app.ts\package.json doesn't exist (directory description file)
    D:\ts1\src\app.ts is not a directory (directory default file)

    ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./src/vendor.ts in D:\ts1
    resolve file
    D:\ts1\src\vendor.ts  doesn't exist
    D:\ts1\src\vendor.ts.ts doesn't exist
    D:\ts1\src\vendor.ts.html doesn't exist
    D:\ts1\src\vendor.ts.js doesn't exist
    resolve directory
    D:\ts1\src\vendor.ts\package.json doesn't exist (directory description file)
    D:\ts1\src\vendor.ts is not a directory (directory default file)

    ERROR in   Error: Child compilation failed:
    Entry module not found: Error: Cannot resolve 'file' or 'directory' D:\ts1\src  \index.html in D:\ts1:
    Error: Cannot resolve 'file' or 'directory' D:\ts1\src\index.html in D:\ts1

Here is my webpack.config.j

    var webpack = require('webpack')
    var HtmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = {
        entry: {
            app: './src/app.ts',
            vendor: './src/vendor.ts'
        },
        output: {
            publicPath: 'http://localhost:8080/',
            filename: '[name].js',
        },
        watch: true,
        resolve: {
            extensions: [' ', '.html', '.ts', '.js']
        },
        module: {
            loaders: [{
                test: /\.ts$/,
                exclude: /node_modules/,
                loader: 'ts-loader'
            }, {
                test: require.resolve('jquery'),
                loader: 'expose?jQuery!expose?$'
            }]
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: ['app', 'vendor']
            }),

            new HtmlWebpackPlugin({
                template: 'src/index.html'
            })
        ],
        devServer: {
            historyApiFallback: true,
            stats: 'minimal'
        }
    }

My package.json file

{
  "name": "ts1",
  "version": "1.0.0",
  "description": "",
  "main": "src/app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "expose-loader": "^0.7.1",
    "html-webpack-plugin": "^2.24.1",
    "webpack": "^1.13.3"
  },
  "dependencies": {
    "jquery": "^3.1.1",
    "ts-loader": "^1.0.0"
  }
}

I am unable to fix this issues. I don't know where I am doing it wrong. Help me resolve this error.

Thanks

Answer 1

The webpack.config .json file is suposed to be located in the root of your directory on the same level as your package.json file.

Directory structure

App
    package.json
    webpack.config.json
    src
        app.ts
        vendor.ts

Then your webpack configuration file will run with this.

    entry: {
        app: './src/app.ts',
        vendor: './src/vendor.ts'
    }

Please pay attention to the url you define in your entry and output