丁鹿学堂：webpack+typescript高效使用ts开发

webpack结合ts使用

1.初始化webpack， npm init -y 生成package.json 文件

自己加一个打包命令 "build": "webpack"

{
  "name": "webpack-ts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.3.0",
    "typescript": "^4.7.3",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }
}

2.安装开发依赖 npm i -D webpack webpack-cli typescript ts-loader

3.自己创建配置文件webpack.config.js

// 引入path包,作用是拼接路径
const path = require('path')
// webpack的所有配置信息都在这里
module.exports = {
    // 指定入口文件
    entry:'./src/index.ts',
    // 指定打包后文件的目录
    output:{
        // 指定打包文件的目录
        path:path.resolve(__dirname,'dist')
        // 打包的文件名
        filename:'bundle.js'
    },
    // webpack 打包时要依赖的一些模块
    module:{
        // 指定加载规则
        rules:[
            {
                // test指定规则生效的文件
                test:/.ts$/, // ts结尾
                use:'ts-loader', // 用ts-loader去处理
                exclude:/mode-modules/ // 排除文件，这里的不去编译
 
            }
        ]
    }
}

4.创建tsconfig配置文件，这个相关配置在上个文章中已经介绍过了，我们只简单选择三项，开启严格模式。

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

5.都配置好以后，再编译ts 就可以直接使用 npm run bulid 去编译了。

以上就是最简单的webpack打造的ts开发编译环境。