使用webpack基础配置并打包typescript

创建项目

进入项目，执行命令

npm init -y
1

创建package.json文件

安装webpack依赖

npm i webpack webpack-cli webpack-dev-server -D
1

安装webpack模板文件

npm i -D  html-webpack-plugin
1

安装typescript 和ts-loader加载器

npm i typescript ts-loader -D 
1

创建webpack配置文件

在根目录下创建webpack.config.js文件

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: {
        one: './src/main.ts' //入口文件
    },
    output: {
        path: path.resolve(__dirname, 'dist'), //打包存放位置
        filename: "bundle.js" //打包后文件名
    },
    module: {
        rules: [{
            test: /\.ts$/i, //匹配所有.ts结尾文件
            loader:'ts-loader',
            exclude: /node_module/,
            options: {
                configFile: path.resolve(__dirname, './tsconfig.json') //./tsconfig.json文件
    　　　　}
        }]
    },
    resolve: {
        extensions: ['.ts', '.js'] //可以当成模块化引入的文件名
    },
    plugins: [
        new HtmlWebpackPlugin({template:'./src/index.html'}) //可以模板插件 生成index.html
    ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

创建tsconfig.json文件

在根目录下创建tsconfig.json文件

{
    "compilerOptions": {
      "allowUnreachableCode": true, // 不报告执行不到的代码错误。
      "allowUnusedLabels": false,	// 不报告未使用的标签错误
      "alwaysStrict": false, // 以严格模式解析并为每个源文件生成 "use strict"语句
      "baseUrl": ".", // 工作根目录
      "experimentalDecorators": true, // 启用实验性的ES装饰器
      "jsx": "react", // 在 .tsx文件里支持JSX
      "sourceMap": true, // 是否生成map文件
      "module": "commonjs", // 指定生成哪个模块系统代码
      "noImplicitAny": false, // 是否默认禁用 any
      "removeComments": true, // 是否移除注释
      "types": [ //指定引入的类型声明文件，默认是自动引入所有声明文件，一旦指定该选项，则会禁用自动引入，改为只引入指定的类型声明文件，如果指定空数组[]则不引用任何文件
        "node", // 引入 node 的类型声明
      ],
      "paths": { // 指定模块的路径，和baseUrl有关联，和webpack中resolve.alias配置一样
        "src": [ //指定后可以在文件之直接 import * from 'src';
          "./src"
        ],
      },
      "target": "ESNext", // 编译的目标是什么版本的
      "outDir": "./dist", // 输出目录
      "declaration": true, // 是否自动创建类型声明文件
      "declarationDir": "./lib", // 类型声明文件的输出目录
      "allowJs": true, // 允许编译javascript文件。
      "lib": [ // 编译过程中需要引入的库文件的列表
        "es5",
        "es2015",
        "es2016",
        "es2017",
        "es2018",
        "dom"
      ]
    },
    // 指定一个匹配列表（属于自动指定该路径下的所有ts相关文件）
    "include": [
      "src/**/*"
    ],
    // 指定一个排除列表（include的反向操作）
    "exclude": [
    ],
    // 指定哪些文件使用该配置（属于手动一个个指定文件）
    "files": [
      "./src/main.ts"
    ]
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

添加启动

在package.json文件的scripts添加启动命名

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --mode=development"
  },
1
2
3
4