Webpack 简介

Webpack 是一个模块打包器，用来把程序源码打包到方便易用的块中，便于浏览器加载，可以替代 angular2 中模块引用工具 SystemJS运用到生产环境中

包(bundle)就是一个 JavaScript 文件，将一对资源(assets)合并一起，以便在一个文件请求中返回给客户端，包中可以包含 Javascript、css、html及其他类型文件

Webpack 会遍历应用中的所有源码，识别 import 语句，构建依赖图谱，产出一个或者多个包，通过加载器(loaders)，webpack可以对各种非 JS 文件进行预处理和最小化

通过 webpack.config.js 配置 webpack 的行为

遍历的起始文件，相当于整个依赖图谱的起点 >=1

entry: {

    app: 'src/app.ts'

}

出口文件，最终生成的合并文件 >=1

output: {

    filename: 'app.js'

}

配置两个入口点

entry: {

    app: 'src/app.ts',

    vendor: 'src/vendor.ts'

},

output: {

    filename: '[name].js'

}

构造出两个独立的依赖图谱，产出两个包文件：app.js , vendor.js

webpack 可以打包任何类型文件：Javascript、typescript、CSS、SASS、LESS、图片、HTML、字体…

通过正则匹配 import 路径中的文件名，使用不同的加载器处理对应的非 JS 文件转换为 JS 文件

loaders: [

    {

        test: /\.ts$/

        loaders: 'ts'

    },{

        test: /\.css$/

        loaders: 'style!css'

    }   

]

目标文件

import { AppComponent } from './app.component.ts';

import 'uiframework/dist/uiframework.css';

第一个 import 触发了 awesome-typescript-loader 加载器处理

第二个 import 出发了 style!css 这个串联加载器，从右至左依次执行 css 加载器（平面化 css @import 和 url()语句），然后执行 style 加载器，将css追加至页面中的 <style> 元素

可以为开发、产品、测试环境定义各自的配置文件，但三者总有一些公共配置，创建公共配置文件 webpack.common.js
**

Webpack-简介