如何用webpack打包ts代码

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第29天

webpack打包ts代码

1. 首先，在控制台执行npm init来生成package.json配置文件

2. 下载所需依赖

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

   等待安装完毕后前往package.json文件查看，若出现下方信息则表示安装成功👇

   "devDependencies": {
       "ts-loader": "^9.4.2",
       "typescript": "^4.9.4",
       "webpack": "^5.75.0",
       "webpack-cli": "^5.0.1"
     }
   

3. 在package.json文件下的scripts选项中添加一项 "build": "webpack" 选项，表示我们可以通过在命令行输入build命令执行webpack打包操作

4. 在项目根目录下创建webpack的配置文件webpack.config.js，文件内大体结构如下👇

   //引入一个包
   const path = require('path');
   ​
   //webpack中的所有配置信息都应该写在module.exports中
   module.exports = {
       
   }
   

5. module.exports中的内容：

       mode: 'production', 
       //指定入口文件
       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/
               }
           ]
       },
           
       //设置引用模块
       resolve: {
           extensions: ['.ts', '.js']
       }
   

6. 在项目根目录下创建tsconfig.json配置文件，自定义配置ts编译选项👇

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

自动化配置——让webpack帮你创建html并引入相关资源

1. 安装相应插件：npm i -D html-webpack-plugin

2. 将插件在webpack.config.js文件中引入👇

   const HTMLWebpackPlugin = require('html-webpack-plugin');
   ​
   module.exports = {
       //省略其他配置
       //配置Webpack插件
       plugins: [
           new HTMLWebpackPlugin(),
       ]
   }
   

3. 再次执行npm run build命令进行打包，会发现dist文件夹下生成了对应的index.html文件

补充： 其中new HTMLWebpackPlugin()方法可以传入参数，参数为对象类型，内含两个配置：

• title: 配置生成html的标题
• template：通过路径指定生成html的模板文件

配置自动刷新的服务器

在网页中打开我们的项目，往往项目改动后要点刷新才能显示最新信息，这里我们配置可以自动刷新的服务器

1. 安装插件：npm i -D webpack-dev-serve

2. 在package.json文件下的scripts选项中添加start选项

   "start": "webpack serve"
   

3. 完成！现在在命令行执行npm run start即可运行项目，打开下方提示的链接，http://localhost:8080/，就实现了自动刷新服务器的配置

实现每次打包前先清空dist文件夹

这样做是为了保证dist文件夹内的文件都为最新打包

1. 安装插件：npm i -D clean-webpack-plugin

2. 引入插件

   const { CleanWebpackPlugin } = require{'clean-webpack-plugin'}
   ​
   module.exports = {
       //省略其他配置
       //配置Webpack插件
       plugins: [
           new CleanWebpackPlugin()
       ]
   }
   

babel的安装

为了让代码向下兼容，我们还需要安装babel

1. 安装：npm i -D @babel/core @babel/preset-env babel-loader core-js

2. 在webpack.config.js中配置：

   use: [
                       //配置babel
                       {
                           //指定加载器
                           loader:"babel-loader",
                           //设置babel
                           options: {
                               //设置预定义的环境
                               presets:[
                                   [
                                       //指定环境的插件
                                       "@babel/preset-env",
                                       //配置信息
                                       {
                                           targets:{
                                               //这里配置适配的浏览器版本
                                               "ie":"11"
                                           },
                                           //指定corejs的版本
                                           "corejs": "3",
                                           //使用corejs的方式，usage表示按需加载
                                           "useBuiltIns": "usage"
                                       }
                                   ]
                               ]
                           }
                       },
                       'ts-loader'
                   ],
   

3. 有时箭头函数存在会使向下兼容的代码依然不能执行，我们在webpack.config.js中配置👇

   environment:{
               arrowFunction: false
           }