（译文）开始学习Webpack-应用TypeScript，配置热加载和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里面不需要： <script defer src="dist/bundle.js"></script>

修改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会用了吗？

原文链接：https://bendyworks.com/blog/getting-started-with-webpack-source-maps

作者知乎/公众号：前端疯（一群热爱前端的一线程序员维护，想要用前端改变世界。）