开始学习Webpack-应用TypeScript，配置热加载和Source Map

最新推荐文章于 2024-09-11 14:42:29 发布

前端星级导师

最新推荐文章于 2024-09-11 14:42:29 发布

阅读量162

点赞数 1

分类专栏： 2024年程序员学习文章标签：学习 webpack typescript

本文链接：https://blog.csdn.net/m0_60453176/article/details/137995635

版权

2024年程序员学习专栏收录该内容

330 篇文章 1 订阅

订阅专栏

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

webpack.config.js:

const path = require('path'); module.exports = { entry: './index.ts', module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: [ ".tsx", ".ts", ".js" ] }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };

修改pacakge.json:

{ ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "serve": "http-server" }, ... }

然后你跑如下命令，可以看到：

$ npm run build > pickle@1.0.0 build /Users/abraham/dev/pickle > webpack ts-loader: Using typescript@2.5.2 and /Users/abraham/dev/pickle/tsconfig.json Hash: 8b5d98f242aeda6844bb Version: webpack 3.6.0 Time: 815ms Asset Size Chunks Chunk Names bundle.js 2.51 kB 0 [emitted] main [0] ./index.ts 14 bytes {0} [built]

修改index.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Pickle</title> </head> <body> <h1>Welcome to Pickle</h1> <label for="color-picker">Select a new background color</label> <input id="color-picker" type="color" value="#2196F3"> <script defer src="dist/bundle.js"></script> </body> </html>

class Pickle { constructor(private picker: Element, private background: HTMLElement) { picker.addEventListener('change', this.colorChange.bind(this), false); this.background = background; } colorChange(event: Event): void { // `<HTMLInputElement>` tells TypeScript what type `target` is so that it knows there is a `value` property available. let input = <HTMLInputElement>event.target; this.background.style.backgroundColor = input.value; } } let picker = document.querySelector('#color-picker'); // The if avoids TypeScript complaining that `picker` might be null. if (picker) { new Pickle(picker, document.body); }

然后运行：

$ npm run build ... $ npm run serve > http-server Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.200.8:8080 Hit CTRL-C to stop the server

浏览器访问：http://127.0.0.1:8080

webpack热加载配置（修改代码，自动刷新代码）

我们的package.json的script长这样：

{ ... "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "serve": "http-server", "watch": "webpack --watch" }, ... }

运行npm run watch后是这样：

$ npm run watch > pickle@1.0.0 watch /Users/abraham/dev/pickle > webpack --watch Webpack is watching the files… ts-loader: Using typescript@2.5.3 and /Users/abraham/dev/pickle/tsconfig.json Hash: 16fb35ccc9f9b3f14c5d Version: webpack 3.8.1 Time: 957ms Asset Size Chunks Chunk Names bundle.js 3.27 kB 0 [emitted] main [0] ./index.ts 775 bytes {0} [built]

当然我们可以直接合并命令：

{ ... "serve": "npm run watch & http-server" ... }

然后直接运行npm run serve就行了。Webpack会自动监听和编译我们的代码。

进一步，我们希望支持Hot Module Replacement（支持模块级别的自动刷新，而不需要刷新浏览器），

需要安装如下两个东西：

$ npm install --save-dev webpack-dev-server + webpack-dev-server@2.9.2 added 165 packages in 10.49s $ npm install --save-dev html-webpack-plugin + html-webpack-plugin@2.30.1 added 38 packages and removed 11 packages in 4.662s