使用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.js

const 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
    };

如果在写的过程中,遇到一些疑难杂症,欢迎评论留言!

使用webpack搭建TypeScript

搭建ts的webpack

评论 (0)