04 webpack 打包 ts

初始化项目

npm init -y

安装依赖

npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin

• 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中的清除插件，每次构建都会先清除目录

配置webpack

根目录下创建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的箭头函数，可选（为了兼容 IE）
        }
    },

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

    module: {
        rules: [
            {
                test: /\.ts$/,
                use: {
                    loader: "ts-loader"     
                },
                exclude: /node_modules/
            }
        ]
    },

    plugins: [
        // 生成前先生成之前的历史生成文件
        new CleanWebpackPlugin(),

        // 自动生成 html 文件，并引入 js 
        new HtmlWebpackPlugin({
            title: 'TS测试'
            // template: "./src/index.html" // 提供 html 模板
        }),
    ]
}

配置TS编译选项

根目录下创建 tsconfig.json，配置可以根据自己需要

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

修改package.json配置

修改 package.json 添加如下配置

{
    // ...
    "scripts": {
        "build": "webpack",
        "start": "webpack serve --open chrome.exe"
    },
    // ...
}

webpack 打包引入 babel

ES6 -> ES5

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

• @babel/core：babel的核心工具
• @babel/preset-env：babel的预定义环境
• @babel-loader：babel在webpack中的加载器
• core-js：core-js用来使老版本的浏览器支持新版ES语法

修改webpack.config.js配置文件

// ...
module: {
    rules: [
        {
            test: /\.ts$/,
            use: [
                {
                    loader: "babel-loader",
                    // 配置 babel 
                    options:{
                        // 预定义环境（最终计划在哪个环境执行）
                        presets: [
                            [
                                // 指定环境的插件
                                "@babel/preset-env",
                                {
                                    "targets":{
                                        "chrome": "58",
                                        "ie": "11"
                                    },
                                    // corejs 版本
                                    "corejs":"3",
                                    // 使用 corejs 的方式
                                    "useBuiltIns": "usage" // 按需加载
                                }
                            ]
                        ]
                    }
                },
                {
                    loader: "ts-loader", // 这个 loader 先执行
                }
            ],
            exclude: /node_modules/
        }
    ]
}
// ...

如此一来，使用ts编译后的文件将会再次被babel处理；

使得代码可以在大部分浏览器中直接使用；

同时可以在配置选项的targets中指定要兼容的浏览器版本；