从零构建Angular 4 Webpack项目时出现错误求助

Hey there, let's walk through the most likely issues and fixes for your build failure, given your setup with Webpack 4.6.0, Webpack CLI 2.0.14, and a TypeScript-based component app.

Common Issues & Fixes #

1. Mismatched Entry File Path #

Your config sets entry: './app/main.ts', but you mentioned your component lives in the src directory. Double-check:

• Does ./app/main.ts actually exist? If your main entry file is in src, update the entry path to './src/main.ts'
• Ensure your component is imported correctly in main.ts (e.g., import MyComponent from './MyComponent.ts'; with the right relative path)

2. Missing Dependencies #

ts-loader relies on typescript to compile your .ts files, and it's easy to forget installing this core dependency. Run this command to make sure all required dev dependencies are in place:

npm install webpack webpack-cli ts-loader typescript --save-dev
# or use yarn if that's your package manager
yarn add webpack webpack-cli ts-loader typescript --dev

3. Missing tsconfig.json #

Webpack's ts-loader needs a TypeScript configuration file to know how to compile your code. Create a tsconfig.json in your project root with these basic settings (adjust paths to match your project structure):

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./build"
  },
  "include": ["./src/**/*"] // swap to "./app/**/*" if your code lives in the app folder
}

4. Check for TypeScript Compilation Errors #

Hidden syntax or type errors in your component code can break the Webpack build before it even bundles. Run this command to validate your TypeScript code first:

tsc --noEmit

Fix any errors it flags, then try the Webpack build again.

5. Verify Your Build Command #

Make sure you're triggering Webpack with the correct config file. Add a script to your package.json:

{
  "scripts": {
    "build": "webpack --config webpack.config.js"
  }
}

Then run npm run build—this ensures Webpack uses your custom config instead of default settings.

内容的提问来源于stack exchange，提问作者Pawan Singewar