錯誤：在為我的打字稿應用程序配置webpack時無法解析'file'或'directory'

Question

我正在嘗試為我的打字稿演示應用程序配置Web包。 當我給webpack命令時，它正在追蹤錯誤

    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

這是我的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'
        }
    }

我的package.json文件

{
  "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"
  }
}

我無法解決這個問題。 我不知道我做錯了什么。 幫我解決這個錯誤。

謝謝

Answer 1

webpack.config .json文件位於與package.json文件相同級別的目錄根目錄中。

目錄結構

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

然后你的webpack配置文件將與此一起運行。

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

請注意您在輸入和輸出中定義的URL