学习使用webpack打包ts代码

需要了解webpack

wabpack和ts结合步骤

1. 要对项目初始化，打开命令行，输入npm init -y ，这句话主要就是在项目中生成package.json，package.json就是用来管理我们的项目

2. 安装一些依赖，webpack要使用webpack就要安装webpack依赖，webpack-cli这是webpack命令行工具，typescript核心包，ts-loader这是typescript和webpack一个整合。打开命令行输入npm install -D webpack webpack-cli typescript ts-loader
   在package.json出现下面代码就算安装成功了

   "devDependencies": {
       "ts-loader": "^9.2.6",
       "typescript": "^4.5.4",
       "webpack": "^5.65.0",
       "webpack-cli": "^4.9.1"
     }
   

3. 编写webpack的一个配置文件，在项目中创建一个webpack.config.js这是一个默认的名字

   // 引入path一个包，是node一个包，主要是拼接路径
   const path = require('path');
   // webpack所有的配置信息都应该写在moduol.exports中
   module.exports = {
       // 指定入口文件
       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/
               }
           ]
       }
   }
   

4. 编写一个typescript的编译规则，创建一个tsconfig.json文件

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

5. 因为要打包所以需要在package.json加入打包命令，在scripts加入

    "scripts": {
       "build": "webpack" // 这个就是需要加打包命令
     },
   

6. 最后在控制台输入 npm run build 就可以生成打包文件了，项目出现dist文件，dist文件里面有bundle.js就算打包成功了

打包文件的html入口文件

在html中引入js文件，js文件就是我们编译成功的ts文件，我们不可能去引入这个文件需要借助webpack来引入

1. 在命令行中安装html-webpack-plugin这个插件
2. 在webpack.config.js中引入html-webpack-plugin

   // 引入html插件
   const htmlWebpackPlugin = require('html-webpack-plugin')
   module.exports = {
   	// 配置webpack插件
   	plugins:[
       	new htmlWebpackPlugin({
               // title 可以给生成html文件的title标签更换内容
               title:'这是tshtml',
               // template 可以给生成的html文件一个模板
               template:"./src/index.html"
       	})
       ]
   }
   // 之前那些配置我就不一一写入了
   

webpack插件

自动更新插件

1. 在命令行输入npm i -D webpack-dev-server，就会生成一个webpack内置的一个服务器
2. 在package.json设置一个命令

   "scripts": {
   	// 启动webpack的服务器并且用chrome来启用，mac命令不同
       "start": "webpack server --open chrome.exe"
     }
   

3. 在命令行输入npm start，就可以实现自动更新了
4. 如果运行后出现了Cannot GET /chrome.exe，解决方法

   	// 在package.json设置成这个命令
   	"scripts": {
   	    "start": "webpack-dev-server"
   	  }
   	
   	// 如果还是不行，在webpack.config.js文件中添加mode属性即可
   	module.exports = {
   		mode : 'development'   // development为开发者环境，production为生产环境变量 ，还有一个为none
   	}
   

清除打包文件并再次打包插件

1. clean-webpack-plugin 清除打包文件，将打包文件再次打包起来，清空原有的文件防止文件冗余
2. 用法：在命令行输入npm i -D clean-webpack-plugin，在webpack.config.js中引入并使用clean-webpack-plugin

   // 引入clean插件
   const {CleanWebpackPlugin} = require('clean-webpack-plugin')
   module.exports = {
   	plugins:[
   	        new CleanWebpackPlugin()
   	    ]
   }
   

webpack设置可引入模块的文件

如果不配置引用模块，在引入ts模块中打包的文件是会报错的
比如说在目录中生成两个文件，一个文件为index.ts用来引用模块的文件，一个文件为demo.ts用来暴露一个变量，index.ts中引入并打印出来，然后打包起来就会报错，因为webpack并不知道ts文件是可以引用的。

解决方法webpack.config.js中添加resolve属性，就可以设置引用模块

module.exports = {
	// 用来设置引用模块
    resolve:{
        extensions:['.ts','.js']
    }
}