使用 Webpack 打包 TS 代码的详细步骤
第一步:初始化项目
- 在终端使用
npm init -y
对项目进行初始化,会产生一个package.json
文件。
第二步:下载相关依赖
-
在终端中输入以下命令下载 webpack、webpack-cli、typescript、ts-loader 。
npm i -D webpack webpack-cli typescript ts-loader
第三步:对 Webpack 进行配置
-
在根目录新建一个名为
webpackconfig.js
的文件。 -
输入以下内容:
const path = require('path'); // webpack 中的所有的配置信息都应该写在 module.exports 中 module.exports = { // 指定入口文件 entry: "./src/index.ts", // 指定打包文件的目录 output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js" }, // 指定 webpack 打包时要使用模块 module: { // 指定要加载的规则 rules: [ { // test 指定的是规则生效的文件 test: /\.ts$/, // 要使用的 loader use: 'ts-loader', // 要排除的文件 exclude: /node_modules/ } ] } }
第四步:对 TS 编译进行配置
-
在根目录新建一个名为
tsconfig.json
的文件。 -
输入以下内容:
{ "compilerOptions": { "module": "ES6", "target": "ES6", "strict": true } }
第五步:配置 webpack 的指令
- 在
package.json
文件中的 script 项中加入"build": "webpack"