通过express配置开发服务器，通过webpack配置example开发环境。

安装依赖

  1. npm i typescript webpack webpack-dev-middleware
  2. webpack-hot-middleware ts-loader tslint-loader 
  3. tslint-loader express body-parser --save-dev
  1. "typescript": "^4.6.4",
  2. "ts-loader": "^9.3.0",
  3. "tslint-loader": "^3.5.4",
  4. "webpack": "^5.72.1",
  5. "webpack-hot-middleware": "^2.25.1",
  6. "webpack-dev-middleware": "^5.3.3",
  7. "express": "^4.18.1",
  8. "body-parser": "^1.20.0"

webpack配置

  1. const fs = require('fs')
  2. const path = require('path')
  3. const webpack = require('webpack')
  5. /* 配置多入口 */
  6. // 读取 webpack.config.js同级目录下的文件夹，遍历
  7. const entries = fs.readdirSync(__dirname).reduce((entries, dir) => {
  8.   const fullDir = path.join(__dirname, dir) // 文件夹全路径
  9.   const entry = path.join(fullDir, 'app.ts') // app.ts 全路径
  10.   // statSync：获取文件、文件夹信息
  11.   if (fs.statSync(fullDir).isDirectory() && fs.existsSync(entry)) {
  12.     /*
  13.       文件夹并且文件夹下 app.ts文件存在，返回一个对象，key 为目录名 例如：
  14.       {
  15.         simple: [
  16.           'webpack-hot-middleware/client',
  17.           'D:\chenzeqin\PublicProject\ts-axios\examples\simple\app.ts'
  18.         ]
  19.       }
  20.     */
  21.     entries[dir] = ['webpack-hot-middleware/client', entry]
  22.   }
  23.   return entries
  24. }, {})
  26. module.exports = {
  27.   mode: 'development',
  28.   /**
  29.    * 我们会在 examples 目录下建多个子目录
  30.    * 我们会把不同章节的 demo 放到不同的子目录中
  31.    * 每个子目录的下会创建一个 app.ts
  32.    * app.ts 作为 webpack 构建的入口文件
  33.    * entries 收集了多目录个入口文件，并且每个入口还引入了一个用于热更新的文件
  34.    * entries 是一个对象，key 为目录名
  35.    */
  36.   entry: entries,
  38.   // entry:{
  39.   //   app:  path.join(__dirname, './base/app.ts')
  40.   // },
  42.   /**
  43.    * 根据不同的目录名称，打包生成目标 js，名称和目录名一致
  44.    */
  45.   output: {
  46.     // path: path.join(__dirname, '__build__'),
  47.     filename: '[name].js',
  48.     publicPath: '/__build__/'
  49.   },
  50.   // devServer: {
  51.   //   contentBase: './__build__',
  52.   // },
  53.   module: {
  54.     // 配置loader
  55.     rules: [
  56.       {
  57.         test: /\.ts$/,
  58.         enforce: 'pre',
  59.         use: [
  60.           {
  61.             loader: 'tslint-loader'
  62.           }
  63.         ]
  64.       },
  65.       {
  66.         test: /\.tsx?$/,
  67.         use: [
  68.           {
  69.             loader: 'ts-loader',
  70.             options: {
  71.               transpileOnly: true
  72.             }
  73.           }
  74.         ]
  75.       },
  76.       {
  77.         test: /\.css$/,
  78.         use: ['style-loader', 'css-loader']
  79.       }
  80.     ]
  81.   },
  83.   resolve: {
  84.     extensions: ['.ts', '.tsx', '.js']
  85.   },
  86.   // 配置plugins
  87.   plugins: [
  88.     new webpack.HotModuleReplacementPlugin(),
  89.     new webpack.NoEmitOnErrorsPlugin(),
  91.   ]
  92. }

:::warning 注意：

  1. publicPath: 配置静态资源的跟路径，如果配置了，index.html script:src 需要加上，如果使用了 html-webpack-plugin,则会自动加上
  2. 如果使用webpack-dev-middleware配置开发服务器，如果没有自己写app.use(express.static(__dirname))处理静态文件，会 GET Error
  3. webpack 版本注意要和html-webpack-plugin兼容 :::

    配置开发服务器

    通过 express 和 webpack服务中间件 webpack-dev-middleware（webpack-server内部也是使用该插件）配置开发服务器。 ```typescript / 开启一个node开发服务器:https://github.com/webpack/webpack-dev-middleware / const express = require(‘express’) const webpack = require(‘webpack’) const webpackDevMiddleware = require(‘webpack-dev-middleware’) const webpackHotMiddleware = require(‘webpack-hot-middleware’) var bodyParser = require(‘body-parser’) const config = require(‘./webpack.config.js’)

const app = express() const router = express.Router() // parse application/json app.use(bodyParser.json())

const compiler = webpack(config)

// 定义一些 api 路由 router.get(‘/simple/get’, (req, res) => { res.json(req.query) }) // more router …

app.use(router)

// Tell express to use the webpack-dev-middleware and use the webpack.config.js // configuration file as a base. app.use( webpackDevMiddleware(compiler, { publicPath: config.output.publicPath // writeToDisk:true, }) )

// 需要在webpack.config.js配置plugins app.use(webpackHotMiddleware(compiler)) // 处理静态资源 app.use(express.static(__dirname))

// Serve the files on port 3000. app.listen(3000, function() { console.log(‘localhost:3000’) })

`` :::warning 注意：<br />用webpack-dev-middleware配置开发服务器，如果没有自己写app.use(express.static(__dirname))`处理静态文件，静态文件请求会 GET Error :::