使用webpack打包编译TypeScript包括静态资源引入声明配置

使用webpack打包编译TypeScript

---

导读

TypeScript 是 JavaScript 的超集，为其增加了类型声明验证，可以编译为 JavaScript 代码。这篇博文里我们将会学习如何集成 webpack 跟 TypeScript。
项目地址：https://github.com/RiversCoder/webpack-test

安装ts开发依赖

cnpm install --D typescript ts-loader

项目目录文件

1. 根目录下新建tsconfig.json文件

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

2. src目录下新建index.ts

interface Person { name: string; age: number; }
let tom: Person = { name: 'Tom', age: 25 };

console.log(tom)

3. 编辑webpack.config.js如下：

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    index: './src/index.ts'
  },
  devtool: 'inline-source-map',
  module:{   // new add +
    rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/
    }]
  },
  resolve: { // new add +
    extensions: [ '.tsx', '.ts',  '.js' ]    
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      title: '全局引入lodash'
    }),
    new webpack.HashedModuleIdsPlugin(),
    new webpack.ProvidePlugin({
      lod: 'lodash'
    })
  ],
  output: {
    filename: '[name].bundle.[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  }
};

命令行打包编译如下

D:\me\npm\test\webpack-test>npx webpack --config webpack.config.js
Hash: 7b8aa6a3b2de9f0f53d2
Version: webpack 4.34.0
Time: 25405ms
Built at: 2019-07-05 9:56:13 AM
                               Asset       Size  Chunks             Chunk Names
index.bundle.334e8e718b2ebca8b3d9.js   7.23 KiB       0  [emitted]  index
                          index.html  208 bytes          [emitted]
Entrypoint index = index.bundle.334e8e718b2ebca8b3d9.js
[/7QA] ./src/index.ts 56 bytes {0} [built]

Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [KQu2] (webpack)/buildin/global.js 472 bytes {0} [built]
    [P7h0] (webpack)/buildin/module.js 497 bytes {0} [built]
        + 2 hidden modules

浏览器控制台打印如下

安装引入第三方库及静态资源

1. 当从 npm 安装第三方库时，需要要同时安装这个库的类型声明文件。
   TypeSearch： http://microsoft.github.io/TypeSearch/

cnpm install --save-dev @types/jquery

2. 引入图片，json，字体等资源

（1）新建建立name.d.ts 文件，用于声明非js/ts文件, 然后在tsconfig中include引入

xxx/xxx.d.ts

declare module "*.json" 
declare module "*.png"

（2）配置tsconfig.json文件信息
tsconfig.json

  "include": 'xxx/*.d.ts'  引入 声明文件

（3）然后在ts项目中就可以按照正常的方式引入即可
index.ts

import  *  as name  from '../package.json'
import { partname } from './package.json'

（4）官网推荐的静态文件声明
xxx/xxx.d.ts

// This will allow you to load `.json` files from disk

declare module "*.json"
{ const value: any;
  export default value;
}

// This will allow you to load JSON from remote URL responses

declare module "json!*"
{ const value: any;
  export default value;
}

declare module "*.svg" {
  const content: any;
  export default content;
}

核心知识点总结 / 一句话总结

• webpack配合typescript开发，需要使用typescript及ts-loader，以及需要在module中配置ts-loader解析.ts后缀的文件
• 引入第三方包需要同时安装类型声明 cnpm install @type/xxx
• 引入静态资源前需要先在一个单独的xxx.ts文件中中声明该资源类型，然后在tsconfig.json使用include字段引入该xxx.ts文件