webpack(4)_编译Typescript

版权声明：本博客主要记录学习笔记和遇到的一些问题解决方案，转载请注明出处！ https://blog.csdn.net/u010982507/article/details/79521948

使用webpack编译Typescript

typescript安装

• 初始化工程
  1、创建工程空目录Test
  2、进入Test目录
  3、使用npm初始化工程 npm init
  4、创建webpack.config.js文件
  5、创建tsconfig.json文件
• 安装typescript
  npm install typescript --save-dev
• 安装ts-loader
  npm install ts-loader --save-dev
  或npm i awesome-typescript-loader --save这个是第三方库，运行效率高些
• 安装typings(全局安装后可用typings命令)
  npm install typings -g
• 安装声明文件打包时候就会报错
  typings install lodash或vue --save
  安装后会生成一个typings.json文件和一个typings文件夹，在typings文件夹下会有个modules目录，modules目录下会有个lodash模块，lodash模块下会有type的声明文件index.d.ts。
• 配置webpack.config.js

module.exports = {
    entry: {
        'app': './src/app.ts'
    },
    output: {
        filename: "./output/[name].[hash:5].bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: {
                    //loader: 'ts-loader' //用这个会报错，todo正在找原因
                    loader:'awesome-typescript-loader'
                }
            }
        ]
    }
}

• 配置tsconfig.json

{
    "compilerOptions": {
         "module": "commonjs",
         "target": "es5", // 将ts编译成什么规范
         "allowJs": true, // 是否允许js语法在ts中
         "typeRoots": [ // 表示在哪个目录下找声明文件
             "./typings/modules"
        ]
    },
    "include": [
        "./src/*" // 编译包含哪些文件
    ],
    "exclude": [
        "./node_modules/" // 编译除去哪些文件
    ]
}