webpack+typescript+Babel

1、初始化项目

npm init -y

2、下载构建工具

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

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",
         // 告诉webpack不使用箭头
        environment: {
            arrowFunction: false // 关闭webpack的箭头函数，可选
        }
    },
// 用来设置引用模块
    resolve: {
        extensions: [".ts", ".js"]
    },
    // 指定webpack打包时要使用模块
    module: {
     // 指定要加载的规则
        rules: [
            {
            // test指定的是规则生效的文件
                test: /\.ts$/,
                use: {
                 // 要使用的loader （通常与babel-loader一起用）
                   loader: "ts-loader"     
                },
                 // 要排除的文件
                exclude: /node_modules/
            }
        ]
    },
 // 配置Webpack插件
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            //title:'TS测试'
            template: "./src/index.html"
        }),
    ]

}

package.json添加如下配置

 {  ...略... 
  "scripts": {    
  "test": "echo \"Error: no test specified\" && exit 1",   
   "build": "webpack",    
   "start": "webpack serve --open chrome.exe"  
   }, 
   ...略...}

在并命令行执行npm run build对代码进行编译，或者执行npm start来启动开发服务器。

开发中还经常需要结合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: [
                  // 配置babel,babel-loader 用对象形式可以添加多个配置项
                     {
                         loader: "babel-loader",
                         options:{
                           // 设置预定义的环境
                             presets: [
                                 [
                                  // 指定环境的插件
                                     "@babel/preset-env",
                                      // 配置信息
                                     {
                                     // 要兼容的目标浏览器（不一定会兼容）
                                         "targets":{
                                             "chrome": "58",
                                             "ie": "11"
                                         },
                                         // 指定corejs的版本
                                         "corejs":"3",
                                          // 使用corejs的方式 "usage" 表示按需加载
                                         "useBuiltIns": "usage"
                                     }
                                 ]
                             ]
                         }
                     },
                     {
                         loader: "ts-loader",
     
                     }
                 ],
                 exclude: /node_modules/
             }
         ]
     }
     ...略...
     

   • 如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。