ts学习三~使用webpack打包ts配置

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

步骤：

1， 初始化项目

                - 进入项目根目录，执行命令

npm init -y

                - 主要作用：创建package.json文件

2， 下载构建工具

npm i -D webpack webpack-cli typescript ts-loader//-D表示开发依赖

   注：

        webpack        -- 构建工具

        webpack-cli   --webpack的命令行工具

        typescript        --ts编译器

        ts-loader         --ts加载器

3，创建webpack.config.js文件，编写webpack配置

首先引入node.js的资源包，用于拼接路径

const path = require("path")

其次, webpack的所有配置信息都应该写在module.exports中

module.exports = {}

        (1), 指定入口文件

entry:"./src/index.ts"

        (2),指定打包文件所在的目录

output:{
   //指定打包文件的目录
   path:path.resolve(__dirname, 'dist),
   //指定打包之后文件的文件名
   filename:"bundle.js"
}

        (3),指定webpack打包时要使用的模块

module:{
    //指定loader规则
    rules:[
        {       
            //指定的是规则生效的文件
            test:/\.ts$/,
            //要使用的loader
            use:'ts-loader',
            //指定要排除的文件
            exclude:/node-modules/
        }
    ]
}

4,创建tsconfig.json文件，编译ts

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

5,在package.json文件中加入build打包命令

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },

最后可以通过npm run build命令完成打包。

*webpack.config.js文件配置增强

（1）安装html-webpack-plugin

npm i -D html-webpack-plugin

对该插件进行配置：

//引入html插件
const htmlWebpackPlugin = require("html-webpack-plugin");

...


//配置webpack插件
plugins:[
     //修改配置
     new htmlWebpackPlugin({
        //title:"自定义title"，
        //首先需要在src下面创建一个HTML文件，作为模版使用，然后生成的网页就是根据这个模版来生成的
        template:"./src/index.html"
    })
]

（2）安装webpack-dev-server --自动更新网页

npm i -D webpack-dev-server

在package.json中进行配置

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production",
    "start": "webpack serve --open"
  },

项目目录下

npm start

启动项目

（3）安装clean-webpack-plugin --清除dist文件夹

npm i -D clean-webpack-plugin

在webpack.config.js文件里边配置如下

const cleanWebpackPlugin = require("clean-webpack-plugin");


......


plugins:[
    new cleanWebpackPlugin(),
    new htmlWebpackPlugin({
        template:"./src/index.html"
    })
]

(4),用来设置引用模块

resolve:{
    extensions:['.ts', '.js']
}

(5),兼容性

npm i -D @babel/core @babel/preset-env babel-loader core-js

在webpack.config.js文件中配置(箭头函数IE不支持)

module:{
    //指定loader规则
    rules:[
        {       
            //指定的是规则生效的文件
            test:/\.ts$/,
            //要使用的loader, 执行顺序：从后往前
            use:[
              {
                //指定加载器
                "loader":"babel-loader",
                //设置babel
                options:{
                     //设置预定义的环境
                     presets:[
                        [
                            //指定环境的插件
                            "@babel/preset-env",
                            //配置信息
                            {
                                //要兼容的目标浏览器
                                targets:{"chrome":"58","ie":"11"},
                                //指定corejs的版本
                                "corejs":"3",
                                //使用corejs的方式 “usage”表示按需加载
                                useBuiltIns:"usage"
                            }
                        ]
                     ]
                    
                }
             }
            ,'ts-loader'],
            //指定要排除的文件
            exclude:/node-modules/
        }
    ]
}

output:{
   //指定打包文件的目录
   path:path.resolve(__dirname, 'dist),
   //指定打包之后文件的文件名
   filename:"bundle.js",
    //告诉webpack不使用箭头函数  --兼容IE
    environment:{
        arrowFunction:false
    }
}

完整的webpack.config.js文件配置如下

// 引入一个包
const path = require('path');

// 引入HTML插件
const htmlWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

// webpack中所有的配置信息都应该写在module.exports中
module.exports = {
    // 指定入口文件
    entry:"./src/index.ts",

    // 指定打包文件所在的目录
    output:{
        // 指定打包文件的目录
        path:path.resolve(__dirname, 'dist'),
        // 打包后文件的文件名
        filename:"bundle.js",
        // 告诉webpack 不使用箭头函数
        environment:{
            arrowFunction:false
        }
    },
    mode: 'development', // 设置mode
    // 指定webpack打包时要使用的模块
    module:{
        // 指定loader规则
        rules:[
            {
                // test 指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use:[
                    {
                        // 指定加载器
                        loader:'babel-loader',
                        // 设置babel
                        options:{
                            // 设置预定义的环境
                            presets:[
                                [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    {
                                        // 要兼容的目标浏览器
                                        targets:{
                                            "chrome":"88"
                                        },
                                        // 指定corejs版本
                                        "corejs":"3",
                                        // 使用corejs的方式   usage表示按需加载
                                        "useBuiltIns":"usage"
                                    }
                                ]
                            ]
                        }
                    }, 
                
                'ts-loader'],
                // 指定要排除的文件
                exclude: /node-modules/
            }
        ]
    },
    // 配置webpack插件
    plugins :[
        new CleanWebpackPlugin(),
        new htmlWebpackPlugin({
            // title:"这是自定义title"
            template:"./src/index.html"
        }),
        
    ],
    // 用来设置引用模块
    resolve:{
        extensions:['.ts', '.js']

    }
}