如何使用 webpack 打包TypeScript 代码
第一步：初始化项目
- 在终端使用
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"
解决上面遗留的问题
问题一：每次编译完成都得重新在 HTML 中引入一次。
解决方案：
- 使用插件
html-webpack-plugin。
- 在终端输入
npm i -D html-webpack-plugin下载需要使用的插件。
- 对 webpack 进行配置
// webpackconfig.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ... plugins: [ new HtmlWebpackPlugin() ] }
- 这样每次打包的时候就会自动生成一个 HTML 文件，并将编译出来的 js 文件引入到 HTML 中。
- 对于 webpack 自动生成的 HTML 文件可以自定义里面的内容。
// webpackconfig.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ... plugins: [ new HtmlWebpackPlugin({ "title": "这是一个自定义的标题。" }) ] }
对于 webpack 自动生成的 HTML 文件也可以自定义想要的模板。
// webpackconfig.js const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ... plugins: [ new HtmlWebpackPlugin({ "template": "./src/index.html" // 模板文件路径 }) ] }
问题二：每次编译都是新文件覆盖旧文件，但是希望它把原文件删除并且重新创建文件。
解决方案：
- 使用插件
clean-webpack-plugin。
- 在终端输入
npm i -D clean-webpack-plugin下载需要使用的插件。
- 对 webpack 进行配置
// webpackconfig.js const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { ... plugins: [ new CleanWebpackPlugin() ] }
问题三：webpack 不知道哪些文件可以作为模块引入，所以在引入 .ts 模块的时候会报错
解决方案
- 配置 webpack.config.json 。
resolve: { extensions: ['.ts','.js'] }
使项目可以兼容更多的浏览器
- babel 可以使 TS 转换为一些老浏览器支持的语法。
- 使用步骤：
- 使用
npm i -D @babel/core @babel/preset-env babel-loader core-js
- 修改 webpack.config.js 的配置：
module: { // 指定要加载的规则 rules: [ { // test 指定的是规则生效的文件 test: /\.ts$/, // 要使用的 loader use: [{ // 指定要用的加载器 loader: "babel-loader", // 设置 babel options: { // 设置预定义环境 preset: [ [ // 指定环境的插件 "@babel/preset-env", // 配置信息 { // 要兼容的目标浏览器 targets: { "chrome": "88" }, // 指定 corejs 的版本 "corejs": "3", // 使用 corejs 的方式 "useBuiltIns": "usage" // 表示按需加载 } ] ] } },'ts-loader'], // 要排除的文件 exclude: /node_modules/ } ] }
webpack 在打包时会创建一个立即执行的箭头函数，导致 ie11 不兼容
解决方案：
- 设置 webpack.config.js 的配置。
output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js", // 告诉 webpack 不使用箭头函数 environment: { arrowFunction: false // 关闭 webpack 的箭头函数，可选 } },
