使用webpack搭建TypeScript 搭建ts的webpack第一步: 新建一个文件夹比方说叫WebpackTs,文件夹里面放如src文件夹,里面放入ts文件第二步: 安装webpack到本地(在WebpackTs这一层)指令: npm install webpack webpack-cli -D 第三步: 要使用webpack搭建就需要他的小伙伴,建一个webpack.config.js文件(先放一边等下再写)第四步: 在package.json中 设置打包目录"scripts":{ "text":"echo \"Error: no test specified\" && exit 1", "build":"webpack", "serve":"webpack serve" } 第五步: 配置webpack.config.js文件const path = require('path') module.export = { entry:"./src/main.ts", //入口文件 output: { //输出文件都放到dist目录下 path: path.resolve(__dirname,"./dist"), //所有的依赖模块合并输出到一个文件 filename:"bundle.js" } } 第六步: 定义ts文件舒写执行代码(后面要测试webpack环境是否搭建成功)src文件夹里面放两个ts文件main.ts和math.ts,(代码放一起了注意区分!)// math.js export function sum(num:number, num2:number){ return num1 + num2 } // main.js import { sum } from "./math" //这里插一句嘴(小声) Ts变量定义的时候要注意区分下,他的类型是小写的string而不是大写的String // string: Typescript 中的字符串类型 // String: Javascript 的字符串包装类的类型 const message: string = "hello TypeScript" console.log(sum(20, 30)) 这个时候感觉自己搭建好了打包一下,报错了!!!!查询过后原因是没有办法解析ts文件//报错信息 You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. see https://webpack.js.org/comcepts#loaders那就浅安装一个插件解决一下吧:指令:npm install ts-loader typescript -D 在config.js文件里配置一下在const path = require('path') module.export = { entry:"./src/main.ts", //入口文件 output: { //输出文件都放到dist目录下 path: path.resolve(__dirname,"./dist"), //所有的依赖模块合并输出到一个文件 filename:"bundle.js" } resolve:{ //文件不让加后缀名,但是又找不到所以需要这个配置一下 extensions:[".ts"] } module: { rules: [{ test:/\.ts$/, loader:'ts-loader' }] } } 准备完毕以后,启动!然后就又报错了报错信息: error while parsing tsconfig.json 这是因为通过ts-loader编译文件的时候 需要一个toconfig文件那就在浅安装一个插件吧:指令:tsc --init 然后在src外部建一个index.html文件用来当作主页面 但是这样每次代码书写完成后都要去更新重复npm run serve步骤无奈....在安装一个插件吧:指令: npm install webpack-dev-server -D要想让html文件里是不需要引入外部文件,这时候需要告诉他默认模板是谁,所以在安装一个插件!!!!! 指令: npm install html-webpack-plugin -D 安装好以后更新我们的webpack.config.jsconst path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') //引入 module.export = { entry:"./src/main.ts", //入口文件 output: { //输出文件都放到dist目录下 path: path.resolve(__dirname,"./dist"), //所有的依赖模块合并输出到一个文件 filename:"bundle.js" } resolve:{ //文件不让加后缀名,但是又找不到所以需要这个配置一下 //但是这里不加js的话 他只会解析ts 所以还会报错 extensions:[".ts",".js",".cjs",".json"] }, module: { rules: [{ test:/\.ts$/, loader:'ts-loader' }] }, plugins: [ new HtmlWebpackPlugin({ template:"./index.html" }) ] } 执行启动!!!! 完美但是再写的过程当中可能不是那么的一番风顺(比如上面代码就缺失了mode,因为粗心大意)然后这个报错信息,包括处理的过程也写了下来!The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.第一段代码说:'mode'选项没有被设置，webpack将会为这个值回退到'production'第二段代码说: 设置'mode'选项为'development'或'production'，以启用每个环境的默认值。解决方案:第一步: package.json中设置： "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode production", "serve": "webpack serve --mode development",//启动方式(也可以dev凭个人习惯了) }, 第二步:webpack.config.js中设置mode const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); //引入 module.exports = { entry: "./src/main.ts", //入口文件 output: {...}, resolve: {...}, module: {...}, plugins: [...], mode:'development' // 设置mode }; 如果在写的过程中,遇到一些疑难杂症,欢迎评论留言!