配置webpack /打字稿：输入模块中出现错误-无法解析“ ./src”

Question

我想用webpack和typesript配置一个空白项目。

到目前为止，进展并不顺利^^。我的输入文件（index.ts）无法识别。

const path = require('path');

module.export = {
    entry: '../src/index.ts',
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']
    },
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};

这是项目结构的样子：

也许你们中的一些人可以帮助我进行配置。我实际上遵循了webpack文档中的步骤。顺便说一句：如果我将index.ts更改为index.js，则捆绑工作...

Answer 1

尝试此操作以验证您的打字稿Webpack设置是否工作正常。

webpack docs for typescript中提到了以下步骤，但不够精确，因此，我建议您按照以下步骤操作，以在调试问题方面取得一些进展

  

在开发人员依赖项下安装

npm install webpack webpack-cli --save-dev
npm install typescript ts-loader --save-dev

  

创建一个示例脚本以测试ts是否可以转换为js

./src/index.ts

console.log("in index.ts");
function addNumbers(a: number, b: number) { 
    return a + b; 
} 
var sum: number = addNumbers(10,15) 
console.log('Sum of the two numbers is: ' +sum); 

  

创建tsconfig.json以将打字稿编译为es5

./tsconfig.json

{
    "compilerOptions": {
      "outDir": "./dist/",
      "noImplicitAny": true,
      "module": "es6",
      "target": "es5",
      "jsx": "react",
      "allowJs": true
    }
}

  

创建webpack.config.js

./webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

  

将以下全部内容添加到package.json

./package.json

"scripts": {
    "webpack" : "webpack",
    "dev" : "npm run webpack -- --mode development",
    "prod" : "npm run webpack -- --mode production"
}

  

完成上述步骤

• 以开发者或生产者模式npm run dev or npm run prod
运行webpack
• 您必须查看下面的输出，进入dist文件夹以查看生成的js包

• 进入dist文件夹，并将生成的js包链接到示例HTML文件，例如index.html
• 如果在浏览器中运行html文件，则会在浏览器控制台中看到js输出

  

如果获得上述结果，那意味着什么？

这意味着ts到js的对话没有任何问题

您可以在my gitrepo的项目中找到上述步骤。

我已经测试了此设置，并且在我的机器上没有问题 node 8.11.4 npm 5.6.0。