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
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
340
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
370
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
560
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
120
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
120
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
420
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
470
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
Create a website using Spatial Web
akkeylab
0
300
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
170
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
140
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
How to train your dragon (web standard)
notwaldorf
92
6.1k
Optimizing for Happiness
mojombo
379
70k
Why Our Code Smells
bkeepers
PRO
337
57k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Agile that works and the tools we love
rasmusluckow
329
21k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Site-Speed That Sticks
csswizardry
10
650
Build your cross-platform service in a week with App Engine
jlugia
231
18k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
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