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
73
Other Decks in Programming
See All in Programming
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
110
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
460
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
CDK開発におけるコーディング規約の運用
yamanashi_ren01
2
250
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
8
2.4k
Better Code Design in PHP
afilina
0
160
SwiftUI Viewの責務分離
elmetal
PRO
2
270
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
170
Formの複雑さに立ち向かう
bmthd
1
930
sappoRo.R #12 初心者セッション
kosugitti
0
270
苦しいTiDBへの移行を乗り越えて快適な運用を目指す
leveragestech
0
1k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
For a Future-Friendly Web
brad_frost
176
9.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
370
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Navigating Team Friction
lara
183
15k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How to train your dragon (web standard)
notwaldorf
91
5.9k
Producing Creativity
orderedlist
PRO
344
40k
A Philosophy of Restraint
colly
203
16k
The Cult of Friendly URLs
andyhume
78
6.2k
Six Lessons from altMBA
skipperchong
27
3.6k
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