Webpack-简介
来源:互联网 发布:nginx tomcat struts2 编辑:程序博客网 时间:2024/05/17 06:13
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
- Webpack-简介
- webpack简介
- webpack&gulp集成简介
- Webpack简介使用教程
- webpack 打包简介
- 前端工具简介 fis3,webpack
- gulp+webpack工具整合简介
- webpack 简介和初步配置
- gulp+webpack工具整合简介
- gulp+webpack工具整合简介
- WebPack详细入门教程(一)之简介
- WebPack
- webpack
- webpack
- webpack
- webpack
- Webpack
- webpack
- Android 性能优化之使用线程池处理异步任务
- struts2中对list和map集合进行封装
- UVa 11609 Teams (组合数学)
- SpringMVC单文件上传
- FFMPEG之路——初探类‘HelloWord’
- Webpack-简介
- web前端知识体系大全
- 阿里云部署rails应用遇到的问题与解决方案
- Android Canvas 文字水平垂直居中
- CDN是什么?使用CDN有什么优势?
- maven settings.xml文件
- 基于MFC的OpenGL绘图
- 你不得不知道的js之作用域链与闭包
- C语言中常见的内存错误