没想到学个ts还能接触到我心心念念的webpack，把我听困了好几次
好在全程无大错，顺顺利利
有点好笑的是，教程已经快过了一大半了，弹幕里还是能因为用哪个编程软件吵半天，吵了好多集了哎

文章目录

• webpack.config.js文件：写在根目录
• package.json的小配置
• tsconfig.json配置
• 最终成果：
• • 文件目录：
  • npm run build 运行结果：

webpack.config.js文件：写在根目录

//webpack.config.js
//引入一个包
const path = require('path');
// 所有的配置信息
module.exports = {
    // 入口文件
    entry: "./src/index.ts",
    // 指定打包文件所在目录
    output:{
        // 打包文件的目录
        path: path.resolve(__dirname, 'dist'),
        // 打包后文件的文件名
        filename: "bundle.js",
        // 告诉webpack不使用箭头函数
        environment:{
            arrowFunction: false
        }
    },

    // 指定webpack打包使用的模块
    module:{
        // 指定加载的规则
        rules:[
            {
                //test是规则生效的文件
                //(使用ts-loader匹配ts结尾的文件)
                test:/\.ts$/,
                use:[
                    // 配置babel
                    {
                        // 指定加载器
                        loader: 'babel-loader',
                        // 设置babel
                        options:{
                            // 设置预定义环境
                            presets:[
                                [
                                    // 指定环境的插件
                                    "@babel/preset-env",
                                    // 配置信息
                                    {
                                        // 兼容的目标浏览器
                                        targets:{
                                            chrome:"88"
                                        },
                                        // 制定corejs版本
                                        "corejs":"3",
                                        // 使用corejs的方式“usage”：按需加载
                                        "useBuiltIns": "usage"
                                    }
                                ]
                                
                            ]
                        }
                    },
                    'ts-loader'
                ],
                //排除的文件
                exclude:/node-modules/
            }
        ]
    }
}

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
53
54
55
56
57
58
59
60
61
62
63
64

package.json的小配置

1. 初始化： npm init -y
2. 安装一些包

   yarn add -D webpack webpack-cli typescript ts-loader
   yarn add -D  @babel/core @babel/preset-env babel-loader core-js
   //或
   npm install -D webpack webpack-cli typescript ts-loader
   npm install -D  @babel/core @babel/preset-env babel-loader core-js
   1
   2
   3
   4
   5

3. 指定构建工具： "build": "webpack"
   

tsconfig.json配置

上一篇文章写得很详细啦，这里就拉出来整合一下，而且记录一下实际开发中遇到的问题
简单配置一下，测试够用

{
    "compilerOptions": {
        "module": "ES6",
        "target": "ES6",
        "strict": true
    }
}
1
2
3
4
5
6
7

！！！如果你只准备好上面3个文件之后，运行就会发现，报错了？甚至vscode上面直接报错波浪线

错误一：
no extension
        Field 'browser' doesn't contain a valid alias configuration
错误二：
       在配置文件tsconfig.json中找不到任何输入。指定的 “include“ 路径为“[“**/*“]”，“exclude“ 路径为“[]
1
2
3
4
5

这是因为在你的项目里面没有ts文件，你先随便添加一个，当然，要根据你的配置信息来：
上面配置的webpack.config.js文件中的入口文件，至少得有吧，要不然还是得报错
如果添加完发现还是有问题，把原来的tsconfig.json文件给删了，重新建一个，应该就可以啦

最终成果：

文件目录：

• dist文件以及bundle.js文件是打包后自动生成的，文件目录名在webpack.config.js=>module.exports =>output里设置
  
• node_modules: 安装的依赖包，需要注意的是将这个文件列入加载排除文件
• src：ts文件放置位置
  

npm run build 运行结果：

不得不说，webpack打包真的是有点点慢了，写代码时间不多，反倒打包等待的时间更长，一等就开始摸鱼，一摸鱼就。。。。
然后代码里首次出现了yarn，为什么呢？
事情还是源于有一次去试岗，被技术官嫌弃我没用过yarn，回来查了一下，好像有点东西，当即就下载了yarn
插入一道面试题：yarn 和 npm的区别？
不得不说，yarn的并行安装以及缓存机制大大吸引了我，npm安装慢确实是一大痛点