typescript使用webpack配置步骤

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了typescript使用webpack配置步骤相关的知识,希望对你有一定的参考价值。

1 webpack

  • 通常情况下,实际开发中我们都需要使用构建工具对代码进行打包,TS同样也可以结合构建工具一起使用,下边以webpack为例介绍一下如何结合构建工具使用TS。

  • 步骤:

    1. 初始化项目

      • 进入项目根目录,执行命令 npm init -y
        • 主要作用:创建package.json文件
    2. 下载构建工具

      • npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin
        • 共安装了7个包
          • webpack
            • 构建工具webpack
          • webpack-cli
            • webpack的命令行工具
          • webpack-dev-server
            • webpack的开发服务器
          • typescript
            • ts编译器
          • ts-loader
            • ts加载器,用于在webpack中编译ts文件
          • html-webpack-plugin
            • webpack中html插件,用来自动创建html文件
          • clean-webpack-plugin
            • webpack中的清除插件,每次构建都会先清除目录
    3. 根目录下创建webpack的配置文件webpack.config.js

      • const path = require("path");
        const HtmlWebpackPlugin = require("html-webpack-plugin");
        const { CleanWebpackPlugin } = require("clean-webpack-plugin");
        
        module.exports = {
            optimization:{
                minimize: false // 关闭代码压缩,可选
            },
        
            entry: "./src/index.ts",
            
            devtool: "inline-source-map",
            
            devServer: {
                contentBase: \'./dist\'
            },
        
            output: {
                path: path.resolve(__dirname, "dist"),
                filename: "bundle.js",
                environment: {
                    arrowFunction: false // 关闭webpack的箭头函数,可选
                }
            },
        
            resolve: {
                extensions: [".ts", ".js"]
            },
            
            module: {
                rules: [
                    {
                        test: /\\.ts$/,
                        use: {
                           loader: "ts-loader"     
                        },
                        exclude: /node_modules/
                    }
                ]
            },
        
            plugins: [
                new CleanWebpackPlugin(),
                new HtmlWebpackPlugin({
                    title:\'TS测试\'
                }),
            ]
        
        }
        
    4. 根目录下创建tsconfig.json,配置可以根据自己需要

      • {
            "compilerOptions": {
                "target": "ES2015",
                "module": "ES2015",
                "strict": true
            }
        }
        
    5. 修改package.json添加如下配置

      • {
          ...略...
          "scripts": {
            "test": "echo \\"Error: no test specified\\" && exit 1",
            "build": "webpack",
            "start": "webpack serve --open chrome.exe"
          },
          ...略...
        }
        
    6. 在src下创建ts文件,并在并命令行执行npm run build对代码进行编译,或者执行npm start来启动开发服务器

2、Babel

  • 经过一系列的配置,使得TS和webpack已经结合到了一起,除了webpack,开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器,在上述步骤的基础上,通过以下步骤再将babel引入到项目中。

    1. 安装依赖包:

      • npm i -D @babel/core @babel/preset-env babel-loader core-js
      • 共安装了4个包,分别是:
        • @babel/core
          • babel的核心工具
        • @babel/preset-env
          • babel的预定义环境
        • @babel-loader
          • babel在webpack中的加载器
        • core-js
          • core-js用来使老版本的浏览器支持新版ES语法
    2. 修改webpack.config.js配置文件

      • ...略...
        module: {
            rules: [
                {
                    test: /\\.ts$/,
                    use: [
                        {
                            loader: "babel-loader",
                            options:{
                                presets: [
                                    [
                                        "@babel/preset-env",
                                        {
                                            "targets":{
                                                "chrome": "58",
                                                "ie": "11"
                                            },
                                            "corejs":"3",
                                            "useBuiltIns": "usage"
                                        }
                                    ]
                                ]
                            }
                        },
                        {
                            loader: "ts-loader",
        
                        }
                    ],
                    exclude: /node_modules/
                }
            ]
        }
        ...略...
        
      • 如此一来,使用ts编译后的文件将会再次被babel处理,使得代码可以在大部分浏览器中直接使用,可以在配置选项的targets中指定要兼容的浏览器版本。

以上是关于typescript使用webpack配置步骤的主要内容,如果未能解决你的问题,请参考以下文章

typescript中的打包方法以及配置方法

typescript中的打包方法以及配置方法

typescript中的打包方法以及配置方法

TypeScript教程# 6:使用webpack打包ts代码

TypeScript使用Webpack搭建环境

使用 Typescript 的 Webpack:两个配置中的通用设置,那么哪个优先?