个人比较喜欢使用ts, 所以今天就依据webpack搭配一个比较常用的开发环境.

更新

[2019-4-26]

Added

  • Initial release

[2019-4-27]

Added

  • 添加增强区块

[2019-5-10]

Added

  • 增强区块新增文章想通过script导入并使用我的类库?
  • 增强区块新增文章babel@7完美替代ts-loader?
  • 增强区块新增文章集成jest单测?

一、前言

PS: 之前一直使用的ts自身的模块机制——namespace & reference以及tsc打包, 但是其对于浏览器的支持并不友好, 需要自行引入模块加载器, 参考这篇文章, 已经解释的非常清楚了.

二、构建

2.1 准备工作

PS: 需要安装必要的组件

2.1.1 安装webpack4

1
npm install --save-dev webpack webpack-cli

2.1.2 安装ts解析相关

1
npm install --save-dev typescript ts-loader

2.1.3 安装development环境组件

1
npm install --save-dev webpack-dev-server

2.1.4 有用的插件

1
2
3
4
5
# 自动处理html文件
npm install --save-dev html-webpack-plugin

# 清楚`lib`目录下重复的文件, 避免冗余
npm install --save-dev clean-webpack-plugin

2.2 基本配置

PS: 配置webpack.config.js

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
cons fs = require('fs');

const cleanWebpackPlugin = require('clean-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'lib'),
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      }
    ],
  },
  devServer: {
    contentBase: './lib',
    hot: true,
    port: 3000,
  },
  plugins: [
    new htmlWebpackPlugin({
      title: '插件库测试'
    }),
    new cleanWebpackPlugin(),
  ],
  devtool: 'inline-source-map',
};

三、增强

PS: 增加了一些增强性的配置, 避免篇幅过长, 拆分为多篇文章.

Desc Link
关于使用ts编写webpack配置文件? 看这里
想通过script导入并使用我的类库? 看这里
babel@7完美替代ts-loader? 看这里
集成jest单测? 看这里