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
92
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
72
Other Decks in Programming
See All in Programming
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
AHC041解説
terryu16
0
590
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
240
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
ISUCON14公式反省会LT: 社内ISUCONの話
astj
PRO
0
180
Rails アプリ地図考 Flush Cut
makicamel
1
110
Honoとフロントエンドの 型安全性について
yodaka
4
250
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
200
2,500万ユーザーを支えるSREチームの6年間のスクラムのカイゼン
honmarkhunt
6
5.1k
負債になりにくいCSSをデザイナとつくるには?
fsubal
9
2.3k
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
693
190k
Code Reviewing Like a Champion
maltzj
521
39k
The Invisible Side of Design
smashingmag
299
50k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Documentation Writing (for coders)
carmenintech
67
4.6k
Bash Introduction
62gerente
610
210k
Code Review Best Practice
trishagee
66
17k
Docker and Python
trallard
44
3.3k
Transcript
前端部署
[email protected]
》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