ts结合webpack使用

webpack打包ts

npm init -y   对项目进行初始化  

生成一个package.json文件

下载依赖

package.json文件里面有下载的依赖 

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

编写webpack的配置文件

创建一个叫webpack.config.js的文件

写入配置信息

//引入一个包

const path =require('path');

// webpack中的所有配置信息都应该写在moudle.exports中

module.exports={

    entry:"./src/index.ts",//指定入口文件

    output:{         //指定打包文件所在目录

        path:path.resolve(__dirname,'dist'),  //指定打包文件所在的目录

        filename:"bundle.js"  //打包后的文件

    },

    //指定webpack打包时要使用的模块

    module:{

        //指定要加载的规则

        rules:[

            {

                test:/\.ts$/,       //test指定的是规则生效的文件

                use:'ts-loader',    //要使用的loader

                exclude:/node-moudules,//要排除的文件

            }

        ]

    }

}

 编写tsconfig.json文件

{

    "compilerOptions": {

        "module": "ES6",  //模块化规范

        "target": "ES6",  //要编译成的js的版本

        "strict": true,   //全部的严格模式

    }

}

 修改一下package.json中的配置   

{

  "name": "pack",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1",

    "build":"webpack"    

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "devDependencies": {

    "ts-loader": "^9.4.4",

    "typescript": "^5.2.2",

    "webpack": "^5.88.2",

    "webpack-cli": "^5.1.4"

  }

}

    "build":"webpack"    使用build调用webpack 

最后生成的文件夹是这样的

在控制台 npm run build 来打包

看是否生成dist文件夹来确认是否成功打包 

自动引入插件

npm i -D html-webpack-plugin

下载完再package.json中就能看到这个依赖了 

下载完依赖还要引入到webpack.config.js中

// 引入html插件

const HTMLWebpackPlugin=require('html-webpack-plugin')

配置文件让他生效

  // 配置webpack插件 html生效

    plugins:[

        new HTMLWebpackPlugin(),

    ]

 生成的html文件可以自定义title

 // 配置webpack插件 html生效

    plugins:[

        new HTMLWebpackPlugin({

            title:"自定义的title"

        }),

    ]

 网页实时热加载插件

 npm i -D webpack-dev-server

 然后再package文件中配置个start热加载

"start": "webpack serve --open  chrome.exe" 

出现Cannot GET /chrome.exe去掉chrome.exe  还有问题百度 

如果提示mode有问题可以在entry的入口文件上面加上  mode:"development",

这样就可以在终端输入npm start 来打开网页

每次删除dist目录下旧文件引入新文件clean

下载插件

npm i -D clean-webpack-plugin

引入clean插件 

文件的引用 

在webpack.config.js中

 resolve:{  //用来设置引用模块

        extensions:['.ts','.js'] //什么后缀的文件可以被引用

    }

配置可以被引用的模块

babel插件

tsconfig.json中target编译成js的版本  浏览器出现不兼容问题需要babel插件解决

下载babel

npm i -D @babel/core @babel/preset-env babel-loader core-js

修改配置文件