从零开始搭建|从零开始搭建 TS + webpack-dev-server 的开发环境从零开始搭建TS+webpack-dev-serv

目的：

可使用 TypeScript 来开发项目

结合 webpack-dev-server 的热重载，提升开发效率

了解相关依赖和配置的作用

准备一、初始项目目录结构（非常简单）

|_ src ||_ index.ts |_ public |_ index.html（只需在body标签中添加）

二、升级为 TS 环境步骤：

最终项目目录结构

|_ src ||_ index.ts |_ public ||_ index.html |_ tsconfig.json |_ package.json

验证

修改 tsconfig.json，将编译后的文件输出到 public 目录：

{ ... "compilerOptions": { "outDir": "./public" } ... }
编辑 ./src/index.ts

const msg: string = 'ts' function getMsg() { return 'Hello, ' + msg } // 更新页面的内容 document.body.textContent = getMsg()
在终端执行：tsc，然后在浏览器中打开 public/index.html 即可看到结果

三、添加 webpack 功能步骤一：

安装基础依赖：npm i webpack webpack-cli webpack-dev-server -D
- webpack：核心依赖，功能不赘
- webpack-cli：用于在命令行中运行 webpack
- webpack-dev-server：为webpack打包生成的资源文件提供web服务，支持 热重载
添加必要目录/文件：
- 在根目录下添加配置文件 webpack.config.json
- 在根目录下添加发布目录 dist
安装其他依赖：ts-loader html-webpack-plugin cross-env -D
- ts-loader：webpack 的 ts 加载器，编译 ts 文件
- html-webpack-plugin：webpack 的 html 插件，可使用模板 html 生成最终 html
- cross-env：方便切换开发和生产环境

最终项目目录结构：

|_ src ||_ index.ts |_ dist |_ public ||_ index.html |_ tsconfig.json |_ package.json |_ webpack.config.json

步骤二：

编辑 webpack.config.json ：

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = { // resolve：设置模块如何被解析 resolve: { // extensions：引入模块时不带扩展 // 原来：import File from '../path/to/file.js' // 现在：import File from '../path/to/file' extensions: ['.js', '.ts', '.tsx'], }, // module：决定了如何处理不同类型的模块 module: { // rules：创建模块时，匹配请求的规则数组 rules: [ { // 匹配所有 ts 文件 test: /\.tsx?$/i, // 使用 ts-loader 来处理 use: 'ts-loader', // 排除这个目录下的 exclude: /node_modules/, }, ], }, // plugins：用于以各种方式自定义构建过程 plugins: [ // 使用目标模板来生成最终 html new HtmlWebpackPlugin({ template: './public/index.html', }), ], }
编辑 public/index.html，将 script 标签去掉，因为 webpack 构建时会自动插入相关标签
【从零开始搭建|从零开始搭建 TS + webpack-dev-server 的开发环境】在 package.json 中添加启动服务的脚本：

{ ... "script": { "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js" } ... }