webpack打包ts的配置及踩坑

最新推荐文章于 2022-10-16 16:50:13 发布

fengyezi159

最新推荐文章于 2022-10-16 16:50:13 发布

阅读量1.5k

点赞数

分类专栏： typescript 文章标签： webpack javascript 前端 typescript

本文链接：https://blog.csdn.net/u010510187/article/details/126158476

版权

在指定的文件夹下执行npm init -y命令来初始化当前文件夹下的package.json文件。
下载相关依赖：
- npm install --save typescript
- npm install --save webpack@4.41.5 webpack-cli@3.3.10 webpack-dev-server@3.10.2
- npm install --save html-webpack-plugin@4.4.1 clean-webpack-plugin
- npm install --save ts-loader@4.0.0 cross-env

注意：

当执行npm run dev报如下错误TypeError: Cannot read property 'tap' of undefined at HtmlWebpackPlugin.apply (F:\typescript_study\01_Typescript\03.webpack_ts\node_modules\html-webpack-plugin\index.js:40:31)说明html-webpack-plugin的版本和webpack的版本不匹配，此时要确保webpack和html-webpack-plugin版本一致。比如webpack4使用h-w-p4.,webpack5使用h-w-h5.

当执行npm run dev报如下错误Module build failed (from ./node_modules/ts-loader/index.js): TypeError: loaderContext.getOptions is not a function这个时候就需要把ts-loader这个模块的版本号和对应的webpack的版本号保持一致就可以解决问题了。

创建入口文件src/main.js
创建打包后的html模板public/index.html
配置build/webpack.config.js文件

// clean-webpack-plugin这个插件会在打包前删除原来打包的文件
const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');
// html-webpack-plugin这个插件会帮助我们在 webpack 打包结束后，自动生成一个 html 文件，并把打包产生文件引入到这个 html 文件中去。
const HtmlWebpackPlugin =