【笔记】TS整合Webpack和Babel

发表于 更新于 阅读次数：

前言

TS整合Webpack和Babel学习笔记

初始化npm项目

1
2
3
mkdir demo
cd demo
npm init -y

TS整合Webpack

下载依赖

1
npm install -D typescript webpack webpack-cli ts-loader

创建项目源代码

1
2
mkdir src
touch src/index.ts

创建Webpack配置文件

1
touch webpack.config.js

entry：指定程序的入口文件
output：指定打包的配置

path：输出的文件目录路径
filename：输出的文件名

module：配置加载器

rules：配置规则

test：通过正则表达式指定以.ts结尾的文件
use：指定要是用的loader
exclude：指定要排除的文件

demo/webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const path = require('path');

module.exports = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node-modules/
      }
    ]
  },
}

创建TS配置文件

1
touch tsconfig.json
demo/tsconfig.json
1
2
3
4
5
6
7
{
  "compilerOptions": {
    "module": "ES2015",
    "target": "ES2015",
    "strict": true
  }
}

添加npm命令

demo/package.json
1
2
3
"scripts": {
  "build": "webpack"
}

通过npm命令打包

1
npm run build

添加Webpack插件自动生成HTML

  • 自动生成HTML并引入相关的资源

下载依赖

1
npm install -D html-webpack-plugin

创建一个HTML模版（可选）

1
touch src/index.html

修改Webpack配置文件

template：指定根据HTML模版生成HTML

demo/webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const path = require('path');
// 引入插件
const HTMLWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node-modules/
      }
    ]
  },
  plugins: [
    // 创建对象
    new HTMLWebpackPlugin({
      template: "./src/index.html"
    })
  ]
}

添加Webpack插件通过服务启动项目

  • 启动一个服务器自动部署项目，当源码发生更改时会自动热部署

下载依赖

1
npm install -D webpack-dev-server

修改npm命令

demo/package.json
1
2
3
"scripts": {
  "start": "webpack serve --open chrome.exe"
}

启动服务器并打开浏览器

1
npm run start

添加Webpack插件在编译前清理旧文件

下载依赖

1
npm install -D clean-webpack-plugin

修改Webpack配置文件

demo/webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin')
// 引入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node-modules/
      }
    ]
  },
  plugins: [
    // 创建对象
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      template: "./src/index.html"
    })
  ]
}

配置可以用来引用的文件

修改Webpack配置文件

resolve：配置可以用来引用的文件

demo/webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader",
        exclude: /node-modules/
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      template: "./src/index.html"
    })，
    resolve: [
      extensions: ['.ts', '.js']
    ]
  ]
}

TS整合Babel

  • 通过Babel将新语法转换成旧语法，并添加浏览器兼容性代码

下载依赖

1
npm install -D core-js @babel/core @babel/preset-env babel-loader

修改Webpack配置文件

loader：设置加载器
options：设置预定义的环境
targets：要兼容的浏览器
corejs：babel使用的corejs版本
useBuildIns：babel调用corejs的方式

usage：按需加载

environment：配置Webpack打包环境

allowFunction：是否使用箭头函数

false：不使用箭头函数

demo/webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "bundle.js",
    environment: {
      allowFunction: false
    }
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              preset: [
                [
                  "@babel/preset-env",
                  {
                    targets: {
                      "Chrome": "58",
                      "ie": "11"
                    },
                    "corejs": "3",
                    "useBuildIns": "usage"
                  }
                ]
              ]
            }
          },
          "ts-loader"
        ],
        exclude: /node-modules/
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      template: "./src/index.html"
    })，
    resolve: [
      extensions: ['.ts', '.js']
    ]
  ]
}

完成

参考文献

哔哩哔哩——尚硅谷