webpack打包TypeScript代码

webpack

npm init -v  
1

项目初始化，会生成pageage.json
安装依赖

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

webpack-cli 是 webpack的命令行工具， ts-loader把typescript和webpack整合一体

新建 webpack.config.js 文件

对ts文件进行编译，还需要新建 tsconfig.json ，来指定ts的编译规范

pageage.json 添加bulid 命令打包 ：

"scripts":{
    "build":"webpack"
}
1
2
3

webpack插件帮助自动生成html文件

npm i -D html-webpack-plugin 
1

安装热更新，代码改变自动刷新浏览器

npm i -D webpack-dev-server
1

pageage.json 配置启动命令,并打开chrome浏览器

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

将之前打包的dist文件清空，在打包新的

npm i -D clean-webpack-plugin
1

兼容性

npm i -D @babel/core @babel/preset-env babel-loader core-is
1

主要是对webpack.config.js 文件的配置，可参考如下

const path = require("path");// node.js 里的模块，主要用于帮助我们拼接路径
// 引入html插件
const HTMLWebpackPlugin = require("html-webpack-plugin");
// 引入clean插件 ,
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
module.exports={ // webpack 中所有的配置信息
    // 指定入口文件
    entry:"./src/index.ts",
    //打包文件所在目录 与文件名
    output:{
        path:path.resolve(_dirname,"dist"),
        filename:"bundle.js",
        environment:{ // 告诉webpack 不使用箭头函数
            arrowFunction:false  
        }
    },
    //指定webpack打包时要使用模块
    module:{
        //指定要加载的规则
        rules:[
            {
                test:/\.ts$/,  //test 指定的是规则生效的文件 这里是匹配所有.ts结尾的文件
                use:[ //要使用的loader
                    { // 配置babel
                        loader:"babel-loader", //指定加载器
                        //设置babel
                        option:{
                            presets:[ // 设置预定义的环境
                                [ 
                                    "@babel/preset-env", //指定环境的插件
                                    //配置信息
                                    { 
                                        targets:{ //要兼容的目标浏览器
                                            "chrome":"58",
                                            "ie":"11"
                                        }, 
                                        "corejs":"3", // 指定corejs的版本
                                        "useBuiltIns":"usage", // 使用corejs的方式"usage"表示按需加载 
                                    }
                                ]

                            ]
                        }
                    },
                    'ts-loader' //加载器执行顺序是从后往前执行

                ],
                exclude:/node-modules/ //要排除的文件
            }
        ]
    },
    //配置webpack插件
    plugins:[
        new HTMLWebpackPlugin(), // 打包后自动生成html文件，并自动引入js文件
        new CleanWebpackPlugin(), // 将之前打包的dist文件清空，在打包新的
    ],
    //用来设置引用模块
    resolve:{
        extensions:['.ts','.js'], //项目中可以引用ts和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
53
54
55
56
57
58
59
60
61