Webpack 工程化基础

webpack 基础

Wepack 工程打包机
Webpack 基本概念
Webpack Demos
Node.js Debugger
webpack学习实践系列
Webpack Dev Server
Webpack loader 十问

Webpack 总得来说是一个资源模块化 JS Module 打包工具，它的核心思想是模块化思想，不管你是图片，JS，CSS，SCSS，LESS，还是 JSX，统统都打包成 JS Module，Anythin to JS Modules。各种资源都有相适配的加载器 Loaders 负责对资源进行处理，Webpack 通过执行加载器完成原始资源的转换。

Hello Webpack

TypeScript
TypeScript Samples
TypeScript Node Starte
TS-Node
Webpack with TypeScript
Awesome TypeScript Loader
TypeScript loader for webpack
Babel loader for webpack
Base64 URL Loader
Webpack 资源管理
TypeScript声明文件 .d.ts
Build Performance

这里同过 TypeScript + Webpack 编写一个 Demo 工程来入门 Webpack 工程化打包机的理念，工程化是必然的软件技术发展方向。TypeScript 作为一个强大的静态类型检查语言是作为工程化开发的理想工具，所以 Node.js + TypeScript + Webpack + 框架的工程结构将会是非常流行的技术栈。TypeScript 现在发布 v3.5.3 版本，官方提供的示例 [TypeScript Node Starte] 是非常值得学习的案例。

Node.js 命令行的 TypeScript 编译器可以使用 npm 来安装，安装后会有一个 tsc 命令来转译 TypeScript 代码为 JavaScript，也可以安装 ts-node 来直接解析运行。

npm install --save-dev [email protected] [email protected]
tsc helloworld.ts
ts-node helloworld.ts

使用 VSCode、Sublime Text、Vim 作为开发工具都是很好的选择。

通过 Node.js 环境使用 Webpack，先通过 npm 来进行全局安装，创建示例工程 webpack-demo 目录，npm init 项目初始化命令生成默认的 package.json 配置文件，可以传入默许参数 --yes 忽略设置内容，关于它得用法可以查询 npm help init。一并安装 webpack-dev-server 这个开发用的 Web 服务器，还有 TypeScript 支持。

Webpack 处理 TypeScript (.ts) 原代码文件需要用到 ts-loader 或 awesome-typescript-loader，前者使用得更多。在代码中导入文件资源时需要 file-loader，导入图片时需要 url-loader，它可以对常用得图片进行 Base64编码，可以设置 limit 选项来限定待编码文件大小。在处理 CSS 样式文件时会用到 css-loader，打包后的样式在页面上还原出来时需要style-loader 提供的功能，它会在 节点下插入一个

新建 src 目录用来放源代码 index.ts：

class Student {
    fullName: string = "";
    readonly age:number = 18;
    constructor( public firstName:string, public middle:string, public lastName:string){
        this.fullName = firstName + ' ' + middle + ' ' + lastName;
    }
}

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName;
}

let user = { firstName: "Jane", lastName: "User" };
// let user = new Student("Jane", "M.", "User");

let $ = (id:string, msg:string) => {
    let tag = document.getElementById(id);
    if (!tag){
        document.body.innerHTML = ("HTML element not found #"+id);
    }else{
        tag.innerHTML = msg;
    }
}
$("content", greeter(user));

其它不需要打包的资源文件单独放放到 public 子目录下，这样的工程目录结构是比较通用合理的。