使用webpack打包ts代码

在实际开发中我们都需要使用构建工具对代码进行打包，下面是使用webpack打包ts代码的步骤。

步骤

1. 初始化项目
   进入项目根目录，执行命令：npm init -y
   主要作用：创建package.json文件

2. 下载构建工具
   npm i -D webpack webpack-cli typescript ts-loader

3. 创建webpack.config.js文件
   一些关于webpack的配置信息

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

// webpack中所有的配置信息都要写在module.exports中
module.exports={
    // 指定入口文件
    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/
            }
        ]
    }
}

4. 创建tsconfig.json文件
   定义TypeScript代码的编译规则和选项。

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

5. 在package.json中加入一行命令

"scripts": {
    "build": "webpack"
  },

最后执行npm run build命令进行打包。

其他设置

1. 安装html插件可以在打包时自动生成html文件：npm i -D html-webpack-plugin
   安装完后在webpack.config.js中进行配置：

// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports={
    // 配置webpack插件
    plugins: [
        new HTMLWebpackPlugin(),
    ]
}

还可以设置自动生成的html文件的模版，生成的html文件按照 index.html的模版生成。

plugins: [
        new HTMLWebpackPlugin({
            // title:'自定义title',
            template: "./src/index.html"
        }),
    ]

2. 安装webpack开发服务器，打包完成会自动打开浏览器
   cnpm i -D webpack-dev-server
   安装完成后在package.json中添加一行命令，执行npm start进行打包

"scripts": {
    "build": "webpack",
    "start": "webpack serve --open --mode development"
  },

3. 安装插件在每次打包前删除之前生成的文件，防止产生冗余文件确保每次都是最新的文件。
   cnpm i -D clean-webpack-plugin
   安装完后在webpack.config.js中进行配置：

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

plugins: [
        new HTMLWebpackPlugin({
            // title:'自定义title',
            template: "./src/index.html"
        }),
        new CleanWebpackPlugin(),
    ]

4. 打包是如果出现引用js，ts文件可能会报错，需要在webpack.config.js中进行设置：

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

5. 使代码可以兼容不同的浏览器，安装以下插件：
   npm i -D @babel/core @babel/preset-env babel-loader core-js
   安装完后在webpack.config.js中进行配置：

module.exports = {
    module: {
    	// 指定要加载的规则
        rules: [
            {
                // test指定的是规则生效的文件
                test: /\.ts$/,
                // 要使用的loader
                use: [
                    // 配置babel
                    {
                        // 指定加载器
                        loader: 'babel-loader',
                        // 设置babel
                        options: {
                            // 设置预定义的环境
                            presets: [
                                [
                                    // 指定环境的插件
                                    '@babel/preset-env',
                                    // 配置信息
                                    {
                                        // 要兼容的目标浏览器
                                        targets: {
                                            "chrome": '88'
                                        },
                                        // 指定core-js的版本
                                        "corejs": '3',
                                        // 使用corejs的方式，'Usage'表示按需加载
                                        "useBuiltIns": 'usage'
                                    }
                                ]
                            ]
                        }
                    },
                    'ts-loader'
                ],
                // 要排除的文件
                exclude: /node-modules/,
            }
        ]
    }
}

6. 在打包时不想使用箭头函数，可以在webpack.config.js中进行设置

module.exports = {
    // 指定打包文件所在目录
    output: {
        // 告诉webpack不使用箭头函数
        environment: {
            arrowFunction: false
        }
    },
}