开始学习Webpack-应用TypeScript，配置热加载(HMR)和Source Map
Posted 前端手艺人
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了开始学习Webpack-应用TypeScript，配置热加载(HMR)和Source Map相关的知识，希望对你有一定的参考价值。
项目初始化：采用TypeScript
我们的版本是：
$ node --version
v8.5.0
$ npm --version
5.5.1
npm版本升级了，因为npm最近带来了新特性，本地会生成package-lock.json，能 提高一些性能，想知道更多的，可以google一下。
创建目录初始结构：
$ mkdir pickle
$ cd pickle
$ touch index.html
$ touch index.ts
$ touch webpack.config.js
初始化package.json
$ npm init --force
Wrote to /Users/abraham/dev/pickle/package.json:
...
--force是告诉自动采用默认配置。 安装相应的包：
$ npm install --save-dev typescript ts-loader webpack http-server
+ typescript@2.5.2
+ ts-loader@2.3.7
+ webpack@3.6.0
+ http-server@0.10.0
added 394 packages in 17.115s
创建tsconfig.json文件：（这里采用本地的typescript包，你也可以全局安装）
$ ./node_modules/typescript/bin/tsc --init
message TS6071: Successfully created a tsconfig.json file.
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
修改配置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()
]
...
};
HotModuleReplacementPlugin 插件是告诉我们用热加载 NamedModulesPlugin 是用来清空编译日志的，这样只会显示我们入口文件信息。 HtmlWebpackPlugin 会把根目录的template文件（index.html），输出到dist目录的filename指定的文件名。这样webpack可以自动在index.html里面添加script标签，所以我们的index.html里面不需要：
修改package.json:
{
...
"serve": "webpack-dev-server --open"
...
}
--open告诉webpack在浏览器打开我们的页面。 运行npm run serve就行了。大功告成。
webpack支持source maps
修改tsconfig.json：、
{
...
"sourceMap": true,
...
}
修改webpack.config.js:
module.exports = {
...
devtool: 'eval-source-map'
};
以上就是今天的内容，不知道你学会了webpack配置，TypeScript会用了吗？ 欢迎留言交流。感谢阅读。
点击阅读原文，查看原文。
以上是关于开始学习Webpack-应用TypeScript，配置热加载(HMR)和Source Map的主要内容，如果未能解决你的问题，请参考以下文章
如何部署我的 Angular 2 + Typescript + Webpack 应用程序
从0开始的TypeScriptの五：webpack打包typescript
从0开始的TypeScriptの五：webpack打包typescript
Webpack 开发服务器 + React + Typescript 在源更改后不会注入资产