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 配置
可以为开发、产品、测试环境定义各自的配置文件,但三者总有一些公共配置,创建公共配置文件 webpack.common.js
**
前行的路上,感谢您的鼓励!!
**