使用 Webpack + TypeScript 来创建项目【持续更新】

以下是一个基本的示例，展示了如何使用Webpack和TypeScript创建一个简单的项目。

首先，确保你已经安装了Node.js和npm。

1. 初始化一个新的npm项目：

npm init -y

2. 安装TypeScript和Webpack及其CLI工具：

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

3. 创建一个tsconfig.json文件来配置TypeScript编译选项：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  }
}

4. 创建一个Webpack配置文件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'),
  },
};

5. 在项目根目录下创建一个src文件夹，并添加一个index.ts文件作为入口点：

console.log('Hello, Webpack + TypeScript!');

6. 在package.json中添加一个脚本来运行Webpack构建：

"scripts": {
  "build": "webpack"
}

7. 运行构建命令：

npm run build

这将生成一个dist/bundle.js文件，包含了你的TypeScript代码被转换和打包的JavaScript版本。