Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webpack
Search
Yu Xin
October 18, 2016
Programming
2
100
Webpack
Webpack introduce.
Yu Xin
October 18, 2016
Tweet
Share
More Decks by Yu Xin
See All by Yu Xin
Clojure Introduction (Chinese)
is
0
79
Other Decks in Programming
See All in Programming
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
680
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
460
ソフトウェア設計とAI技術の活用
masuda220
PRO
7
1.4k
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
140
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
manfredsteyer
PRO
0
390
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.2k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
21k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
180
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
570
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
140
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
77
9.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Automating Front-end Workflow
addyosmani
1370
200k
The Pragmatic Product Professional
lauravandoore
35
6.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Raft: Consensus for Rubyists
vanstee
140
7k
For a Future-Friendly Web
brad_frost
179
9.8k
Done Done
chrislema
184
16k
Docker and Python
trallard
45
3.5k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Transcript
前端部署 yuxin@makenv.com 》Webpack
传统的网页
Web App时代的前端
新的挑战 • 越来越复杂的项目结构 • 模块化的javascript • 版本管理 • 模块依赖 •
打包发布
迷茫 • JS模块化. module定义 AMD, CMD, ... • 包管理工具 NPM,
Bower, Browserify ... • 构建工具 grunt, gulp, ...
常见的模式 • 纯静态目录结构 • 开发调试时保持原始结构,发布的时候再统一 打包 • 开发过程就提供工具,直接打包 SourceMap, LiveUpdate
gulp + bower • bower作为包管理器 • 支持browersync的开发服务器 • gulp pipeline负责构建过程
• wiredep负责打包以及js/css注入 • 通过插件支持angularjs template打包
Webpack
参考项目 • react-starter-kit https://github.com/kriasoft/react-starter-kit 仅仅使用Webpack作为打包工具, 项目构建依赖gulp • redux-sample https://github.com/rackt/redux 使用Webpack作为完整的开发构建部署工具
使用webpack-dev-server作为开发服务器
体验Webpack • npm安装依赖的javascript 模块 配置webpack.config.js • 了解webpack的基本概念 - loader, plugin
进一步扩展webpack配置
基本的Webpack配置
index.html
安装依赖 npm install -g webpack webpack-dev-server …… npm install --save
react npm install --save react-redux npm install --save redux ……
开发过程 • 配置好webpack.config.js webpack-dev-server相关配置 • 启动webpack-dev-server • webpack-dev-server会自动监控相关的资源 文件变化,自动重新打包
Webpack + NPM • Webpack支持npm打包的javascript library/framework • Webpack缺省配置会自动搜索node_modules 下的模块 webpack
--config webpack.config.js
Webpack 的原理 • 通过分析程序中的require调用构建依赖关系 • 通过loader支持其他的资源(css, less, sass, json …)
css/less/sass最后会转换成js postcss
引入css • 理解loader基本概念 • 根据需要添加loader • 代码中添加相关资源的require
安装相关的loader模块 npm install --save-dev css-loader webpack.config.js
添加css依赖
更多功能 • webpack-dev-server • source-map • react-hot-reload • more and
more http://webpack.github.io/docs/ • angular-template-loader https://github.com/WearyMonkey/ngtemplate-loader https://github.com/teux/ng-cache-loader
使用感受 • All in One. 一个工具解决大部分问题. • 支持React Hot Reload
… very cool. • 支持module css.
使用中的困惑 • 非javascript模块的依赖关系处理 • js uglify & minify • duplicated
dependencies
Thanks. The End