TypeScript webpack打包ts

webpack 打包 ts

• 初始化package.json

npm init -y

• 在项目里安装webpack和ts

npm i -D webpack webpack-cli typescript ts-loader

• 项目根目录下创建 webpack.config.js 文件,指定打包ts文件的loader

// 引入一个 path 包const path = require('path')// webpack中的配置信息，都应该写在module中module.exports = {    mode: 'production',    // 入口文件    entry: "./src/index.ts",    // 出口    output: {        path: path.resolve(__dirname, "dist"),        filename: "bundle.js",    },    // 指定webpack 打包要使用的模块    module: {        // 指定要加载的规则        rules: [            {                // test 指定的时规则生效的文件                test: /\.ts$/,                use: "ts-loader",                // 要排除的文件                exclude: /node_modules/,            }        ]    }}

• 配置ts编译js的配置文件tsconfig.json，配置ts编译规则

{    "compilerOptions": {        "target": "es2015",        "module": "es6",        "strict": false    }}

• package.json添加脚本"build":"webpack"

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

• 使用 html-webpack-plugin 自动创建html文件

安装html-webpack-plugin并在webpack.config.js文件配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {    ···    module: {       ···    },    // 插件    plugins: [        new HtmlWebpackPlugin(            {                title: "自定义title"            }        )    ]}

• 使用 webpack-dev-server 启动并实时编译项目

安装webpack-dev-server

npm i -D webpack-dev-server

修改 package.json 中的 scripts

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

mac中是：

"scripts":{    "start":"webpack serve --open 'google chrome'"    }

• 使用 babel

使用babel将js代码高版本转为低版本，来适用低版本或不兼容的浏览器。(例如兼容ie11)

安装

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

配置webpack.config.js

// 引入一个 path 包const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const { resolve } = require('path')// webpack中的配置信息，都应该写在module中module.exports = {    mode: 'production',    // 入口    entry: "./src/index.ts",    // 出口    output: {},    // 指定webpack 打包要使用的模块    module: {        // 指定要加载的规则        rules: [            {                // test 指定的时规则生效的文件                test: /\.ts$/,                use: [                    {                        // 指定加载器                        loader: "babel-loader",                        // 设置babel                        options: {                            // 设置预定义的环境                            presets: [                                [                                    //指定环境的插件                                    "@babel/preset-env",                                    // 配置信息                                    {                                        // 要兼容的目标浏览器                                        targets: {                                            "chrome": "88"                                        },                                        //指定corejs的版本                                        "corejs": "3",                                        //使用corejs的方式 "usage" 是按需加载。                                        "useBuiltIns": "usage"                                    }                                ]                            ]
                        }                    },                    // 从下往上执行，先将ts代码转为js                    "ts-loader",                ],                // 要排除的文件                exclude: /node_modules/,            }        ]    },    // 插件    plugins: [      ···    ],    //用来设置引用模块    resolve: {}}

到这里ie11还是不能兼容，因为ie11不支持箭头函数，webpack默认会打包成立即执行的箭头函数的代码，所以webapck.config.js还用添加:

   output: {        path: path.resolve(__dirname, "dist"),        filename: "bundle.js",        // 告诉webpack不适用箭头函数        environment: {            arrowFunction: false        }    },

webpack.config.js 文件模板

// 引入一个 path 包const path = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const { resolve } = require('path')// webpack中的配置信息，都应该写在module中module.exports = {    mode: 'production',    // 入口文件    entry: "./src/index.ts",    // 出口    output: {        path: path.resolve(__dirname, "dist"),        filename: "bundle.js",        // 告诉webpack不适用箭头函数        environment: {            arrowFunction: false        }    },    // 指定webpack 打包要使用的模块    module: {        // 指定要加载的规则        rules: [            {                // test 指定的时规则生效的文件                test: /\.ts$/,                use: [                    {                        // 指定加载器                        loader: "babel-loader",                        // 设置babel                        options: {                            // 设置预定义的环境                            presets: [                                [                                    //指定环境的插件                                    "@babel/preset-env",                                    // 配置信息                                    {                                        // 要兼容的目标浏览器                                        targets: {                                            "chrome": "88",                                            "ie": "11"                                        },                                        //指定corejs的版本                                        "corejs": "3",                                        //使用corejs的方式 "usage" 是按需加载。                                        "useBuiltIns": "usage"                                    }                                ]                            ]
                        }                    },                    // 从下往上执行，先将ts代码转为js                    "ts-loader",                ],                // 要排除的文件                exclude: /node_modules/,            }        ]    },    // 插件    plugins: [        new HtmlWebpackPlugin(            {                title: "自定义title",            }        )    ],    //用来设置引用模块    resolve: {        extensions: [".ts", ".js"] // 告诉 webpack 凡是ts、js文件结尾的文件都可以作为模块使用    }}