javascript - 错误:在为我的 typescript 应用程序配置Webpack时无法解析"file"或“目录”

Question

我正在尝试为我的打字稿演示应用程序配置Web Pack。当我给出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'
    }

请注意您在输入和输出中定义的网址