webpack入门(1)
来源:互联网 发布:轩辕剑 还原数据库 编辑:程序博客网 时间:2024/05/19 11:48
爱编程w2bc.com
什么是webpack?
webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到。
你可以不打算将其用在你的项目上,但没有理由不去掌握它,因为以近期 Github 上各大主流的(React相关)项目来说,它们仓库上所展示的示例已经是基于 webpack 来开发的,比如 React-Boostrap 和 Redux。
webpack安装
安装及demo
It can beused as a module bundler similar to Browserify, and do much more.
$ browserify main.js > bundle.js# be equivalent to$ webpack main.js bundle.js //和browserify等价
Webpack常用命令:
webpack 最基本的启动webpack命令
webpack -w 提供watch方法,实时进行打包更新
webpack -p 对打包后的文件进行压缩
webpack -d 提供SourceMaps,方便调试
webpack –colors 输出结果带彩色,比如:会用红色显示耗时较长的步骤
webpack –profile 输出性能数据,可以看到每一步的耗时
webpack –display-modules 默认情况下 node_modules 下的模块会被隐藏
全局安装webpack和webpack-dev-server:
npm install –g webpack webpack-dev-server
webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端,客户端根据消息作出响应。
直接敲命令:webpack-dev-server 打开本机浏览器输入 http://127.0.0.1:8080就可以看到你页面效果;
在webpack模块打包中最好先安装依赖,好多组件需要用,使用命令:npminstall;
module.exports = { entry: './main.js',//entry用来定义入口文件 output: {//output用来定义构建后的文件的输出,有path和filename filename: 'bundle.js' }};//entry中定义构建多个文件时,filename可以对应的更改为[name].js用于定义不同文件构建后的名字
cd命令
f://找出路径
$ webpack //这一个命令就在目录下生成一个bundle.js文件$ webpack-dev-serverLaunch theserver, visit http://127.0.0.1:8080 .
如何在本机运行克隆项目并创建依赖clone the repo and install the dependencies.
Linux & Mac
$ git clone git@github.com:ruanyf/webpack-demos.git
Windows
//Git
$ git clone https://github.com/ruanyf/webpack-demos.git:$ cd webpack-demos$ npm install//可以省略
$ cd demo01$ webpack-dev-server
Visit http://127.0.0.1:8080 with your browser.
//C:\Users\Administrator\Documents\GitHub\webpack-demos 我的默认项目位置
Git常用命令
Git常用命令
- webpack入门(1)
- webpack--简单入门(1)
- webpack入门(1)
- webpack入门学习1
- webpack 2.6.1入门
- webpack入门(一)
- webpack入门(二)
- webpack入门(三)
- webpack入门(四)
- webpack入门(五)
- Webpack入门(详细)
- webpack入门(2)
- webpack新手简单入门1
- react+webpack入门(2)
- webpack入门学习(—)
- webpack的使用(1) ----简单快速入门
- Webpack入门
- webpack 入门
- 笔记:事件分发机制(二):ViewGroup的事件分发
- 注解定时任务实现
- 第三周JavaScript学习记录
- java中String相关操作方法
- 微信小程序二维码解析遇到的问题
- webpack入门(1)
- THREE.js案例源码学习-geometry_birds
- 数据结构与算法Java版——双向链表
- 解决mysqld_safe Directory '/var/run/mysqld' for UNIX socket file don't exists
- shell循环etl跑历史数据
- 一篇随笔
- GCD信号量控制并发
- Object转Flaot解决方案
- 解决Firefox不响应window.resize事件