Webpck & Typescript 工作流程

全局安装typescript

$ npm install -g typescript

生成tsconfig.json文件

$ tsc

根目录下会生成 tsconfig.json文件
修改tsconfig.json文件

"target": "es6",  
"module": "es2015", 

初始化项目

$ npm init

根目录下会生成package.json文件

安装依赖包

$ npm install ts-loader webpack webpack-cli  typescript -D

根目录下会生成node_modules文件夹

配置项目编译ts文件

• 根目录新建 src/index.ts

// src/index.ts
console.log()

• 根目录新建 public/index.html

// `public/index.html`



  
  
  


  
 Webpack & Typescript 

• 根目录新建 webpack.config.js文件

const path = require('path');
module.exports = {
  entry: './src/index.ts', // webpack编译的入口文件
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        include: [path.resolve(__dirname, 'src')]
      }
    ]
  },
  output: {
    filename: 'bundle.js', // 编译之后输出的文件名
    path: path.resolve(__dirname, 'public'), //输出文件的绝对路径
  }
}

• 修改 package.json

// 添加脚本
"build": "webpack",

执行命令

$ npm run build

会按照webpack配置在public下生成bundle.js文件

安装webpack-dev-server

$ npm install webpack-dev-server -D

• 修改 package.json

// 添加脚本
"serve": "webpack-dev-server",

• 修改 webpack.config.js

resolve: {
    extensions: ['.ts', '.js'],
  },
output: {
    publicPath: 'public',

• 修改public/index.html

Signup for the latest tutorials
  

    Your name
    
    Your email
    
    Your age
    
    submit
  

  
  

• 修改src/index.ts

import { formData } from './forms';

const form = document.querySelector('form')!;

form.addEventListener('submit', (e) => {
 e.preventDefault();
 const data = formData(form);
 console.log(data);
});

• 新建src/forms.ts

export const formData = (form: HTMLFormElement) => {
  const inputs = form.querySelectorAll('input');
  let values: {[prop: string]: string} = {};

  inputs.forEach(input => {
    values[input.id] = input.value;
  });
  return values;
};

• 执行命令

$ npm run serve

之后在开发环境修改相关的ts文件，会达到实时编译的效果。

配置sourceMap

通过浏览器直接访问index.html会发现控制台显示的console.log打出的内容的资源地址是打包后的bundle.js

image.png

那么如何知道该代码的源地址呢？

• 修改 tsconfig.js文件

"sourceMap": true, 

• 修改webpack.config.js文件

 devtool: 'eval-source-map',

重新执行打包命令并通过浏览器访问index.html

image.png

再见！