Webpack案例学习
来源:互联网 发布:网络连接发生意外错误 编辑:程序博客网 时间:2024/04/29 03:32
注:本来自己是打算学习一下requirejs的,结果从社区了解到Webpack的功能更强大而且更好用,就搜索到了篇文章。
本文是照着阮一峰老师的demo进行的练习。详见https://github.com/ruanyf/webpack-demos。这些列子都写得很简单明了,让我学习起来感觉轻松不少!
Webpack要怎么才能使用
1、首先必须要安装node,npm这些环境工具啦!
2、其次要安装Webpack和webpack-dev-server:
$ npm install webpack webpack-dev-server
3、然后clone这个.git到本地,到各个目录项并启动webpack-dev-server:
$ git clone git@github.com:ruanyf/webpack-demos.git$ cd webpack-demos$ npm install
然后你就可以在浏览器 http://127.0.0.1:8080 中看到页面了。
再进一步:webpack到底是什么?
Webpack是一个和grunt/gulp相似的前端构建系统,
Webpack可以用来像browserify那样进行前端模块儿话构建,但是,Webpack要更强大。
Webpack的配置文件是webpack.config.js:
// webpack.config.jsmodule.exports = { entry: './main.js', output: { filename: 'bundle.js' }};
配置文件弄好了,就可以直接启动Webpack了
$ webapck
上面展示的是无参数启动,下面这些参数是需要知道的:
- webpack – for building once for development
- webpack -p – for building once for production (minification)
- webpack –watch – for continuous incremental build
- webpack -d – to include source maps
webpack –colors – for making things pretty
To produce a production ready application, you could write scripts field in your package.json file as following.
// package.json{ // ... "scripts": { "dev": "webpack-dev-server --devtool eval --progress --colors", "deploy": "NODE_ENV=production webpack -p" }, // ...}
目录
Entry file
Multiple entry files
Babel-loader
CSS-loader
Image loader
CSS Module
UglifyJs Plugin
HTML Webpack Plugin and Open Browser Webpack Plugin
Environment flags
Code splitting
Code splitting with bundle-loader
Common chunk
Vendor chunk
Exposing Global Variables
Hot Module Replacement
React router
Entry file
- Webpack案例学习
- Vue+webpack学习案例(一)-构建Vue项目
- webpack学习
- Webpack学习
- webpack学习
- webpack学习
- webpack学习
- webpack学习
- webpack学习
- 学习webpack
- webpack学习
- webpack学习
- webpack学习
- webpack学习
- webpack学习
- react 实战案例(webpack构建)
- Vue+webpack+Vux学习案例(二)—构建开源中国微信版(开篇)
- reactJs + webpack + semantic-ui-react 应用案例
- 主机之间ping命令互通设置及解决方案
- 7_4_P题 Toy Storage 题解[Poj 2398](计算几何,点线关系,二分)
- Poj:2503 Babelfish
- Linux基础知识[2]【延迟及定时机制】
- 获取手机串号 版本 品牌
- Webpack案例学习
- OMA DRM原理的研究及实现
- 我真不想写背景
- WPF实现物理效果 拉一个小球
- 访问手机短消息对话的常用URI及部分URI返回数据汇总
- iOS PureLayout的基本使用(二)
- 设计模式 - 观察者模式
- 通过HttpServletRequest获取上一个页面
- int 和Integer 有什么区别?