TypeScript 基础-webpack 打包(第三章)

wiki

对代码进行打包的构建工具

使用

1. 初始化项目

• 进入项目根目录，执行命令 npm init -y
• 主要作用：创建用来管理包的package.json文件

2. 下载构建工具与所需插件

• 命令npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin，主要安装了如下7个包：

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

• 命令npm i -D @babel/core @babel/preset-env babel-loader core-js，安装 Babel ，目的是对代码进行转换以使其可以兼容到更多的浏览器，共安装了4个包：

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

3. 根目录下创建 webpack 的配置文件 webpack.config.js

const path = require("path");                                   // 主要用来拼接目录
const HtmlWebpackPlugin = require("html-webpack-plugin");       // 引入插件，执行npm run build后会生成 index.html 
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 引入插件，会清除自动清除旧的打包文件

// webpack 的所有配置都写在 module.exports 中
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 的箭头函数，可选
        }
    },
    // 用来设置哪些文件需要作为模块来引入
    resolve: {
        extensions: [".ts", ".js"]              // 指定模块拓展名
    },
    // 指定 webpack 打包时要用到的模块
    module: {
        rules: [                                // 指定要加载的规则
            {
                test: /\.ts$/,                  // 规则生效的文件，即需要处理的文件
                use: [
                   {                            // babel 配置复杂，可以使用一个对象来配置
                       loader: "babel-loader",
                       options:{
                           presets: [           // 预定义环境，代码要在哪些浏览器中运行
                               [
                                   "@babel/preset-env",         // 指定环境预定义插件
                                   {
                                       "targets":{              // 要兼容的目标浏览器
                                           "chrome": "58",
                                           "ie": "11"
                                       },
                                       "corejs":"3",            // codejs 的版本
                                       "useBuiltIns": "usage"   // codejs 的使用方法：按需加载
                                   }
                               ]
                           ]
                       }
                   },
                   {
                       loader: "ts-loader",      // 文件处理方式
                   }
                ],
                exclude: /node_modules/         // 要排除的文件
            }
        ]
    },
    // 配置 webpack 插件
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title:'自定义 title'
            // ,template:"./src/index.html"  // 可以直接指定模板
        }),
    ]

}

4. 根目录下创建 TS 文件的配置文件 tsconfig.json

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

5. 修改package.json，添加如下配置

{
  ...
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",                         // 新增，使用 build 时调用 webpack
    "start": "webpack serve --open chrome.exe"  // 新增，启动 webpack 服务器，并指定浏览器打开
  },
  ...
}

6. 进行打包

• 在src下创建 TS 文件，并在并命令行执行npm run build对代码进行编译
• 执行npm start来启动开发服务器