话不多说, 直接上手啦!

一、打包项目

• 创建一个项目文件夹并 初始化项目 npm init -y

• 生成 package.json 配置文件

• 修改文件, 增加 bulid 命令 "build": "webpack",
  

  image.png

• webpack 部分

  • 安装 webpack 需要的一些依赖

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

  • 创建 webpack 的配置文件 webpack.config.js

   // 引入一个包
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/
       }]

   }
}

• TypeScript 部分
  • 创建 typescript 配置文件

    tsc --init

• 生成文件 tsconfig.json

{
  "compilerOptions": {
    
    "target": "es5",                            
    
    "module": "commonjs",                      
  
    "strict": true,                               
   }
}

• 执行 npm run build 进行打包, 生成打包文件, 这时候就能看到打包后的效果啦, 下面再让我们看看怎么把项目运行起来吧!

二、运行项目

• 安装 webpack 插件, 使的打包后会自动创建 html 文件, 并自动引入相关的 js 文件

  npm i -D html-webpack-plugin

• 配置 webpack.config.js 文件
  image
  
  
  image.png
• 安装 webpack 开发服务器插件 ( 可以根据项目的改变自动刷新 )

  npm i -D webpack-dev-server

  • 安装时要注意版本兼容问题, webpack 5 版本不兼容 比较高版本的 webpack-dev-server, 所以这里安装的是 npm i -D webpack-dev-server@3.11.2
  • 配置 package.json 文件 "serve": "webpack serve --open chrome.exe",
    
    image.png
• 执行 npm start 启动项目
• 安装 webpack 插件, 在打包之前清除 dist 目录下的旧文件, 再生成新文件, 避免缓存

  npm i -D clean-webpack-plugin

  • 引入插件并配置
    image
    image
• 给 webpack 设置可引用模块

  • 用来设置引用模块 (这样配置自后, 里面索设置的文件类型可以作为模块引用)

    
    
    image

三、 处理兼容性( 兼容 不同浏览器 )

• 安装 babel 依赖

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

  image.png
• 配置 webpack.config.js 文件 ( 在 module 中 配置 babel )

    // 指定 webpack 打包时要使用模块
    module: {

        // 指定要加载的规则
        rules: [{
            // test 指定规则生效的文件
            test: /\.ts$/,
            // 要使用的 loader
            use: [

                // 配置 babel
                {

                    // 指定加载器
                    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/
        }]

    },

• 为兼容 低版本浏览器, 设置 webpack 打包时, 不使用箭头函数
  image.png

• 打包后的结果
  image.png

四、附上完整 dome 地址, 可在里面 Typescript 更多配置项 文件夹中查看, 更多 TS 常用配置项

https://github.com/chenyanNc/TSWebpackDome.git

文笔不好请多见谅 (✿◡‿◡)，欢迎指摘呀 ~~~