欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack4打包typescript

程序员文章站 2022-05-30 17:45:30
...

Webpack4 使用

注意: 本次使用的 webpack 版本

github地址

"devDependencies": {
    "ts-loader": "^5.4.5",
    "typescript": "^3.4.5",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  }

目标

使用 webpack 配合 ts-loader 对 ts 文件编译打包

准备工作

  • 安装webpack
  • 安装webpack-cli
  • 安装webpack-dev-server
  • 安装typescript
  • 安装ts-loader
  • 配置tsconfig.json
  • 配置webpack.config.js

安装工具

webpack

npm install --save-dev webpack

webpack-cli

npm install --save-dev webpack-cli

typescript

npm i --save-dev typescript

ts-loader

npm i --save-dev ts-loader

配置项

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "allowJs": true
  },
  "include": ["./app/*"],
  "exclude": ["./node_modules"]
}

package.json

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server --open"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^5.4.5",
    "typescript": "^3.4.5",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  },
  "dependencies": {}
}

webpack.config.js

module.exports = {
  devtool: "eval-source-map",
  entry: __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "./public",
    historyApiFallback: true,
    inline: true
  },
  module: {
    rules: [{ test: /\.ts$/, use: "ts-loader" }]
  }
};

把node_modules忽略掉

.gitignore

node_modules

使用 webpack 构建本地服务器

想不想让你的浏览器监听你的代码的修改,并自动刷新显示修改后的结果,其实 Webpack 提供一个可选的本地开发服务器,这个本地服务器基于 node.js 构建,可以实现你想要的这些功能,不过它是一个单独的组件,在 webpack 中进行配置之前需要单独安装它作为项目依赖

npm install --save-dev webpack-dev-server

配置ts-loader

配置 ts 支持

踩过的坑

提示需要安装webpack-cli

webpack4 中 cli 与 webpack 分开了 需要分别安装,详情请参考:提示需要安装 webpack-cli

配置ts中 遇到不能resolve 问题

webpack配置ts

参考文章