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

第一步、安装nodejs；

第二步、创建项目文件夹，在该项目下执行npm init命令；

第三步、执行npm i -D webpack webpack-cli typescript ts-loader命令，导入项目所需依赖；

第四步、在根目录下创建webpack.config.js文件，引入webpack相关配置，在package.json文件中加入脚本"build": "webpack"；

// 引入依赖
const path = require('path');

// webpack所有配置信息
module.exports = {
  // 是否压缩  development - 不压缩  production - 压缩
  mode: 'development',
  // 文件入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定什么类型的文件
        test: /\.ts$/,
        // 要使用的loader
        use: 'ts-loader',
        // 要排除的文件(夹)
        exclude: /node-modules/
      }
    ]
  }
}

第五步、在根目录下创建tsconfig.json文件，写入tsconfig相关配置；

{
  "compilerOptions": {
    "module": "ES2015",
    "target": "ES2015",
    "strict": true,
  }
}

第六步、在根目录下创建src文件夹，存放项目全部资源；

第七步、执行npm i -D html-webpack-plugin ，引入html-webpack-plugin插件来创建HTML入口文件，接着在webpack.config.js文件中引入该插件；

// 引入依赖
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin'); // 生成HTML入口文件

// webpack所有配置信息
module.exports = {
  // 是否压缩  development - 不压缩  production - 压缩
  mode: 'development',
  // 文件入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定什么类型的文件
        test: /\.ts$/,
        // 要使用的loader
        use: 'ts-loader',
        // 要排除的文件（夹）
        exclude: /node-modules/
      }
    ]
  },

  plugins: [
    new HTMLWebpackPlugin({
      title: "自定义HTML文件的Title"
    }),
  ],
}

第八步、执行npm i -D webpack-dev-server，引入webpack-dev-server插件来帮助项目热启动，在package.json文件中加入脚本"start": "webpack serve --open chrome.exe"；

第九步、执行npm i -D clean-webpack-plugin，引入clean-webpack-plugin插件来帮助项目每次执行webpack打包前先清空打包输出文件夹dist，接着在webpack.config.js中引用该插件；

// 引入依赖
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin'); // 生成HTML入口文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');// 清空dist

// webpack所有配置信息
module.exports = {
  // 是否压缩  development - 不压缩  production - 压缩
  mode: 'development',
  // 文件入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定什么类型的文件
        test: /\.ts$/,
        // 要使用的loader
        use: 'ts-loader',
        // 要排除的文件（夹）
        exclude: /node-modules/
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      title: "自定义HTML文件的Title"
    }),
  ],
}

第十步、在webpack.config.js文件中解决在打包时找不到js和ts模块文件；

// 引入依赖
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin'); // 生成HTML入口文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 清空dist

// webpack所有配置信息
module.exports = {
  // 是否压缩  development - 不压缩  production - 压缩
  mode: 'development',
  // 文件入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定什么类型的文件
        test: /\.ts$/,
        // 要使用的loader
        use: 'ts-loader',
        // 要排除的文件（夹）
        exclude: /node-modules/
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      title: "自定义HTML文件的Title"
    }),
  ],

  // 用来设置引用的模块
  resolve: {
    extensions: ['.ts', '.js'],
  }
}

第十一步，执行npm i -D @babel/core @babel/preset-env babel-loader core-js，安装babel所需的依赖，并在webpack.config.js文件中配置babel和corejs；

// 引入依赖
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin'); // 生成HTML入口文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 清空dist

// webpack所有配置信息
module.exports = {
  // 是否压缩  development - 不压缩  production - 压缩
  mode: 'development',
  // 文件入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js",
  },

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定什么类型的文件
        test: /\.ts$/,
        // 要使用的loader
        use: [
          {
            // 指定加载器
            loader: 'babel-loader',
            options: {
              // 设置预定义的环境
              presets: [
                [
                  // 指定环境的插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    targets: {
                      "chrome": "100",
                      "ie": "11",
                    },
                    // 指定corejs的版本
                    "corejs": "3",
                    // 使用corejs的方式 "usage" 表示按需加载
                    "useBuiltIns": "usage",
                  }
                ]
              ]
            }
          },
          'ts-loader'// 先将ts转化成js，再用babel将js转化
        ],
        // 要排除的文件（夹）
        exclude: /node-modules/
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      title: "自定义HTML文件的Title"
    }),
  ],

  // 用来设置引用的模块
  resolve: {
    extensions: ['.ts', '.js'],
  }
}

第十二步，在webpack.config.js文件中配置，使webpack在打包时不使用箭头函数（兼容IE）。

// 引入依赖
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin'); // 生成HTML入口文件
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 清空dist

// webpack所有配置信息
module.exports = {
  // 是否压缩  development - 不压缩  production - 压缩
  mode: 'development',
  // 文件入口文件
  entry: "./src/index.ts",
  // 指定打包文件所在目录
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js",
    // 让webpack兼容IE11， 不使用箭头函数
    environment: {
      arrowFunction: false, // 箭头函数
    }
  },

  // 指定webpack打包时要使用的模块
  module: {
    // 指定要加载的规则
    rules: [
      {
        // test指定什么类型的文件
        test: /\.ts$/,
        // 要使用的loader
        use: [
          {
            // 指定加载器
            loader: 'babel-loader',
            options: {
              // 设置预定义的环境
              presets: [
                [
                  // 指定环境的插件
                  "@babel/preset-env",
                  // 配置信息
                  {
                    targets: {
                      "chrome": "100",
                      "ie": "11",
                    },
                    // 指定corejs的版本
                    "corejs": "3",
                    // 使用corejs的方式 "usage" 表示按需加载
                    "useBuiltIns": "usage",
                  }
                ]
              ]
            }
          },
          'ts-loader'// 先将ts转化成js，再用babel将js转化
        ],
        // 要排除的文件（夹）
        exclude: /node-modules/
      }
    ]
  },

  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      title: "自定义HTML文件的Title"
    }),
  ],

  // 用来设置引用的模块
  resolve: {
    extensions: ['.ts', '.js'],
  }
}