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

最新推荐文章于 2024-08-08 17:26:17 发布

2401_84411018

最新推荐文章于 2024-08-08 17:26:17 发布

阅读量122

点赞数 2

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

本文链接：https://blog.csdn.net/2401_84411018/article/details/138413851

版权

程序员专栏收录该内容

202 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Webpack和TypeScript进行开发，包括配置HotModuleReplacement以实现模块级热更新，以及启用sourcemaps以便于调试。作者还演示了如何在package.json中整合命令并配置webpack-dev-server以实现实时编译和自动打开浏览器。

摘要由CSDN通过智能技术生成

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

修改配置webpack.config.js：

module.exports = { ... devServer: { contentBase: path.resolve(__dirname, '.') ， hot: true } ... };

依赖它们：

const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); ...

添加插件：

module.exports = { ... plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html' }), new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin() ] ... };