什么是WebPack，为什么要使用它？ - 简书
什么是WebPack，为什么要使用它？
1、什么是WebpackWebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。2、为什要使用WebPack今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法a:模块化，让我们可以把复杂的程序细化为小的文件;b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；c:scss，less等CSS预处理器.........这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。3、WebPack和Grunt以及Gulp相比有什么特性其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。优点：模块化在webpack看来一切都是模块！这就是它不可不说的优点，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。1、CSSwebpack提供两个工具处理样式表，css-loader和style-loader，二者处理的任务不同，css-loader使你能够使用类似@import和url(...)的方法实现require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。需要分别安装：npminstall--save-dev style-loader css-loader
2、CSS modules在过去的一些年里，JavaScript通过一些新的语言特性，更好的工具以及更好的实践方法（比如说模块化）发展得非常迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，且基于优化工具，依赖管理和加载管理可以自动完成。不过前端的另外一部分，CSS发展就相对慢一些，大多的样式表却依旧是巨大且充满了全局类名，这使得维护和修改都非常困难和复杂。最近有一个叫做 CSS modules 的技术就意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所需要做的一切就是把”modules“传递都所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中具有相同的类名可能会造成的问题。具体的代码如下
这样相同的类名也不会互相污染3、CSS预编译Sass 和 Less之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句，你现在可能都已经熟悉了，在webpack里使用相关loaders进行配置就可以使用了，以下是常用的CSS 处理loadersa:less-loaderb:sass-loaderc:stylus-loader还有一个CSS处理平台-PostCSS，可以让你用CSS事先更多功能，比如如何使用PostCSS，我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。首先安装postcss-loader 和 autoprefixer（自动添加前缀的插件）npminstall--save-dev postcss-loader autoprefixer并在webpack配置文件中进行设置，只需要新建一个postcss关键字，并在里面申明依赖的插件，如下，现在你写的css会自动根据Can i use里的数据添加不同前缀了。
二、webpack-pulgins插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。1、如何使用插件？要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组），我们添加了一个实现版权声明的插件。如HtmlWebpackPugin插件，该插件的作用是依据一个简单的模板，帮你生成最终的Html5文件，这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。//安装npm install --save-dev html-webpack-pugin
水清鱼读月，山精鸟谈天。
从V1迁移到V2由于使用的是webpack版本是2.2.1，所以针对原文做了一些修改。针对webpack2的修改部分和添加的部分在最底部，文中已经改过来了。 写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限...
无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅，特此分享以备自己日后查看，也希望更多的人看到这篇好的文章：http://www.jianshu.com/p/42e11515c10f 写在前面的话阅读本文之前，先看下面这个webpack的配置文件，如果每...
最近在学习 Webpack,网上大多数入门教程都是基于 Webpack 1.x 版本的,我学习 Webpack 的时候是看了 zhangwang 的 &&入门 Webpack，看这篇就够了&& 写的非常好,不过是基于 Webpack 1.x 版本的,语法上和 Webpack...
GitChat技术杂谈 前言 本文较长，为了节省你的阅读时间，在文前列写作思路如下： 什么是 webpack，它要解决的是什么问题？ 对webpack的主要配置项进行分析，虽然不会涉及太多细节，但是期待在本节能让我们知晓如果我们有什么需求，我们该从哪些配置项着手修改？ 分析...
日更新，添加了clean-webpack-plugin,babel-env-preset,添加本文涉及到的所有代码的示例，如果你在学习过程中出错了，可点击此处参考 写在前面的话 阅读本文之前，先看下面这个webpack的配置文件，如果每一项你都懂，那本文能...
某一日深夜，突然极想喝奶茶，于是忍着刺骨的寒风，独自一人在大街小巷一家一家店地找，不知折腾了多久费尽九牛二虎之力才终于在一家小店买到。但当如愿以偿地捧着那杯“来之不易”的奶茶，独自一人站在空荡荡的街道，散着黄色晕圈的路灯光也有了那么一丝萧瑟冷清之感，却突然没有了喝的欲望。 ...
何以描述一种心情， 一间空荡的屋子， 一个足够忧伤的故事， 从现在到永远寂寞到死。 脚上沾染大街的泥土， 雨水冲刷着一切 要了结的终会了结， 那么还没开始的呢？ 那么我自己呢? 在空寂的庙堂上跳舞 对所有的虚无膜拜， 用没有回声的山谷去爱， 流落在漫漫迷雾中徘徊。 我所有等...
你相信这个世界有鬼吗？ 你相信这个世界有道吗？ 生命轮回，总有执念者不愿往生或是不幸者没法往生，徘徊在现世，成鬼。 道法自然，由外而内。通过打坐，不断吸收天地精气，先天入门，坐照成型，一步终南。 鬼与道相生相克，有鬼则有道，修道则见鬼，凡人终其一生难窥道门，亦难见鬼。 “小...
故 乡 访 友 （外一首）
轻车一路回故乡，
怕我迷途侯道旁。
陌上枝头群鸟唱，
园中菜花众蜂狂。
新建楼房窗明净，
风送门前午餐香。什么是WebPack，为什么要使用它_百度知道
什么是WebPack，为什么要使用它
我有更好的答案
1. 为什么用 webpack?他像 Browserify, 但是将你的应用打包为多个文件. 如果你的单页面应用有多个页面, 那么用户只从下载对应页面的代码. 当他么访问到另一个页面, 他们不需要重新下载通用的代码.他在很多地方能替代 Grunt 跟 Gulp 因为他能够编译打包 CSS, 做 CSS 预处理, 编译 JS 方言, 打包图片, 还有其他一些.它支持 AMD 跟 CommonJS, 以及其他一些模块系统, (Angular, ES6). 如果你不知道用什么, 就用 CommonJS.2. Webpack 给 Browserify 的同学用对应地:browserify main.js & bundle.jswebpack main.js bundle.jsWebpack 比 Browserify 更强大, 你一般会用 webpack.config.js 来组织各个过程:// webpack.config.jsmodule.exports = {
entry: './main.js',
filename: 'bundle.js'
}};这仅仅是 JavaScript, 可以随意添加要运行的代码.3. 怎样启动 webpack切换到有 webpack.config.js 的目录然后运行:webpack 来执行一次开发的编译webpack -p for building once for production (minification)webpack -p 来针对发布环境编译(压缩代码)webpack --watch 来进行开发过程持续的增量编译(飞快地!)webpack -d 来生成 SourceMaps4. JavaScript 方言Webpack 对应 Browsserify transform 和 RequireJS 插件的工具称为 loader. 下边是 Webpack 加载 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):// webpack.config.jsmodule.exports = {
entry: './main.js',
filename: 'bundle.js'
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' } // loaders 可以接受 querystring 格式的参数
}};要开启后缀名的自动补全, 你需要设置 resolve.extensions 参数指明那些文件 Webpack 是要搜索的:// webpack.config.jsmodule.exports = {
entry: './main.js',
filename: 'bundle.js'
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' }
resolve: {
// 现在可以写 require('file') 代替 require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
HTML5/Android/iOS高端培训
主营：HTML5、Android、iOS高级课程培训
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。什么是WebPack，为什么要使用它？
什么是WebPack，为什么要使用它？
什么是WebPack，为什么要使用它？
摘要说明(会不定期更新)：
A：这里是webpack1.0+，2.0+请移步这里(已经配置好的简单脚手架)
B：webpack2.0+案例：1
C：webpack中文网站
D：webpack英文网站
E：react+webpack3.0+(开发和生产环境分离的脚手架，建议了解其他之后再参考，欢迎clone,issuse,扩展使用,原本配置参考dev分支)
正文从下面开始.................
1、什么是Webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
2、为什要使用WebPack
今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
a:模块化，让我们可以把复杂的程序细化为小的文件;
b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；
c:scss，less等CSS预处理器
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常反锁的，这就为WebPack类的工具的出现提供了需求。
3、WebPack和Grunt以及Gulp相比有什么特性
其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，这个工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个浏览器可识别的JavaScript文件。
优点：模块化
在webpack看来一切都是模块！这就是它不可不说的优点，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import 和 url(...)的方法实现 require()的功能,style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
需要分别安装：npm install
2、CSS modules
在过去的一些年里，JavaScript通过一些新的语言特性，更好的工具以及更好的实践方法（比如说模块化）发展得非常迅速。模块使得开发者把复杂的代码转化为小的，干净的，依赖声明明确的单元，且基于优化工具，依赖管理和加载管理可以自动完成。
不过前端的另外一部分，CSS发展就相对慢一些，大多的样式表却依旧是巨大且充满了全局类名，这使得维护和修改都非常困难和复杂。
最近有一个叫做 CSS modules 的技术就意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack从一开始就对CSS模块化提供了支持，在CSS loader中进行配置后，你所需要做的一切就是把”modules“传递都所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中具有相同的类名可能会造成的问题。具体的代码如下
这样相同的类名也不会互相污染
3、CSS预编译
Sass 和 Less之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句，
你现在可能都已经熟悉了，在webpack里使用相关loaders进行配置就可以使用了，以下是常用的CSS 处理loaders
a:less-loader
b:sass-loader
c:stylus-loader
还有一个CSS处理平台-PostCSS，可以让你用CSS事先更多功能，比如如何使用PostCSS，我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。
首先安装postcss-loader 和 autoprefixer（自动添加前缀的插件）
npm install
二、webpack-pulgins
插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。
Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。
1、如何使用插件？
要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键字部分添加该插件的一个实例（plugins是一个数组），我们添加了一个实现版权声明的插件。如HtmlWebpackPugin插件，
该插件的作用是依据一个简单的模板，帮你生成最终的Html5文件，这个文件中自动引用了你打包后的JS文件。每次编译都在文件名中插入一个不同的哈希值。
npm install --save-dev html-webpack-pugin
用云栖社区APP，舒服~
【云栖快讯】云栖社区技术交流群汇总，阿里巴巴技术专家及云栖社区专家等你加入互动，老铁，了解一下？&&
为您提供简单高效、处理能力可弹性伸缩的计算服务，帮助您快速构建更稳定、安全的应用，提升运维效...
RDS是一种稳定可靠、可弹性伸缩的在线数据库服务。支持MySQL、SQL Server、Po...
阿里中间件云大使前端构建工具webpack有什么缺陷？ - 知乎有问题，上知乎。知乎作为中文互联网最大的知识分享平台，以「知识连接一切」为愿景，致力于构建一个人人都可以便捷接入的知识分享网络，让人们便捷地与世界分享知识、经验和见解，发现更大的世界。<strong class="NumberBoard-itemValue" title="被浏览<strong class="NumberBoard-itemValue" title="8,271分享邀请回答39629 条评论分享收藏感谢收起10232 条评论分享收藏感谢收起Posts - 262,
Articles - 2,
Comments - 969
..........
23:02 by 龙恩0707, ... 阅读,
30分钟手把手教你学webpack实战
什么是webpack? 他有什么优点？
& & 首先对于很多刚接触webpack人来说，肯定会问webpack是什么？它有什么优点？我们为什么要使用它？带着这些问题，我们来总结下如下：
&&&&Webpack是前端一个工具，可以让各个模块进行加载，预处理，再进行打包，它能有Grunt或Gulp所有基本功能。优点如下：
支持commonJS和AMD模块。
支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使我们使用ES6的语法来编写代码。
可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。
使用模块加载器，可以支持sass，less等处理器进行打包且支持静态资源样式及图片进行打包。
更多等等。。。带着这些问题我们慢慢来学习webpack。
二：如何安装和配置
首先我的项目目录结构是：文件名叫webpack，里面只有一个main.html，代码如下：
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
&script src="src/react.min.js"&&/script&
&div id="content"&&/div&
&script src="build/build.js"&&/script&
还有一个文件夹src，该文件夹存放了二个js文件；react.min.js源文件和main.js文件，main.js源码如下：
/* 内容区模块代码 */
var ContentMode = React.createClass({
render: function(){
&div className="ContentMode"&
&div class="contents"&{this.props.contents}&/div&
{this.props.children}
/* 页面div封装 上面三个模块 */
var Page = React.createClass({
render: function(){
&div className="homepage"&
&ContentMode
contents ="longen"&this is one comment&/ContentMode &
&ContentMode
contents ="longen2"&this is two comment&/ContentMode &
/* 初始化到content容器内 */
React.render(
React.createElement(Page,null),document.getElementById("content")
该代码是React.js代码，是react.js入门学习一中的代码复制过来的&为了演示；
安装步骤如下：
生成package.json文件；
首先我们需要在根目录下生成package.json文件，需要进入项目文件内根目录下执行如下命令：npm&init
如上通过一问一答的方式后会在根目录下生成package.json文件，如下所示：
2 .&通过全局安装webpack
执行命令如下：npm&install&-g&webpack&如下所示：
在c盘下会生成node_modules文件夹中会包含webpack，此时此刻我们可以使用webpack命令了；
3.&配置webpack
每个目录下都必须有一个webpack.config.js，它的作用就好比Gulpfile.js、或者&Gruntfile.js，就是一个项目配置，告诉webpack需要做什么。
如下是我的webpack.config.js代码如下：
module.exports = {
entry: "./src/main.js",
filename: "build/build.js"
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: "style!css" },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/,
loader: "jsx-loader" }
resolve: {
extensions: ['', '.js', '.jsx']
plugins: []
entry&是页面中的入口文件，比如我这边的入口文件时main.js
output:&是指页面通过webpack打包后生成的目标文件放在什么地方去，我这边是在根目录下生成build文件夹，该文件夹内有一个build.js文件；
resolve:&定义了解析模块路径时的配置，常用的就是&可以用来指定模块的后缀，这样在引入模块时就不需要写后缀，会自动补全。
plugins:&定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取公用的部分，生成common.
module.loaders：是文件的加载器，比如我们之前react需要在页面中引入jsx的js源码到页面上来，然后使用该语法，但是通过webpack打包后就不需要再引入JSXTransformer.js；看到上面的加载器；比如jsx-loader加载器就是代表JSXTransformer.js的，还有style-loader和css-loader加载器；因此在使用之前我们需要通过命令把它引入到项目上来；因此需要如下命令生成下；
jsx-loader加载器&npm&install&jsx-loader&--save-dev&如下：
Style-loader加载器&npm&install&style-loader&--save-dev&如下：
css-loader&加载器&npm&install&css-loader&--save-dev&如下：
局部安装webpack&执行命令：npm&install&webpack&--save-dev
我们这边干脆把gulp的全局安装和在项目中局部安装也安装下，稍后有用~
Gulp全局安装&npm&install&-g&gulp&如下：
在项目文件内，gulp局部安装&使用命令&npm&install&gulp&--save-dev&如下所示：
因此在我们文件夹node_modules下生成文件如下：
现在我们来执行命令&&如下所示：
&即可在根目录下生成一个build文件夹中build.js 如下所示：
我们还可以使用如下命令：webpack&--display-error-details&命令执行，这样的话方便出错的时候可以查看更详尽的信息；比如如下：
现在我们再来刷新下页面；看到如下：
可以看到页面渲染出来了，我们接着来看看页面中的请求：
可以看到只有一个文件react.min.js的源文件和build.js&我们刚刚生成的build.js文件了，因此我们通过webpack进行打包后，我们现在就不再需要和以前一样引入JSXTransformer.js了。我们还可以看看build.js内生成了那些js，这里就不贴代码了，自己可以看看了~
上面是使用webpack打包；现在我们再来看看使用第二种方案来打包~
使用gulp来进行打包
我们知道使用gulp来打包的话，那么我们需要在根目录下需要新建&Gulpfile.js；
因此我们这边Gulpfile.js的源码如下：
var gulp = require('gulp');
var webpack = require("gulp-webpack");
var webpackConfig = require("./webpack.config.js");
gulp.task('webpack', function () {
var myConfig = Object.create(webpackConfig);
return gulp
.src('./src/main.js')
.pipe(webpack(myConfig))
.pipe(gulp.dest('./build'));
// 注册缺省任务
gulp.task('default', ['webpack']);
然后代码变为如下：
module.exports = {
entry: "./src/main.js",
filename: "build.js"
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: "style!css" },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/,
loader: "jsx-loader" }
resolve: {
extensions: ['', '.js', '.jsx']
plugins: []
即可，然后再在命令行中输入gulp即可生成build/build.js了；如下所示：
Github上的代码如下：
&自己可以把压缩包下载下来运行下即可。
三：理解webpack加载器
& & Webpack提供了一套加载器，比如css-loader,less-loader,style-loader，url-loader等，用于将不同的文件加载到js文件中，比如url-loader用于在js中加载png/jpg格式的图片文件，css/style&loader用于加载css文件，less-loader加载器是将less编译成css文件；
配置加载器
module.exports = {
entry: "./src/main.js",
filename: "build.js",
path: __dirname + '/assets/',
publicPath: "/assets/"
loaders: [
{test: /.css$/, loader: 'style!css'},
{test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
resolve: {
extensions: ['', '.js', '.jsx'],
//模块别名定义，方便后续直接引用别名，无须多写长长的地址
a : 'js/assets/a.js',
// 后面直接引用 require(&a&)即可引用到模块
b : 'js/assets/b.js',
c : 'js/assets/c.js'
plugins: [commonsPlugin, new ExtractTextPlugin("[name].css")]
module.loader:&其中test是正则表达式，对符合的文件名使用相应的加载器.&
/.css$/会匹配&xx.css文件，但是并不适用于xx.sass或者xx.css.zip文件.
url-loader&它会将样式中引用到的图片转为模块来处理;&配置信息的参数&?limit=8192&表示将所有小于8kb的图片都转为base64形式。
entry&模块的入口文件。依赖项数组中所有的文件会按顺序打包，每个文件进行依赖的递归查找，直到所有模块都被打成包；
output：模块的输出文件，其中有如下参数：
filename:&打包后的文件名
path:&打包文件存放的绝对路径。
publicPath:&网站运行时的访问路径。
relolve.extensions:&自动扩展文件的后缀名，比如我们在require模块的时候，可以不用写后缀名的。
relolve.alias:&模块别名定义，方便后续直接引用别名，无须多写长长的地址
plugins&是插件项;
四：理解less-loader加载器的使用
& & 我们先来理解下less-loader加载器，其他的sass-loader也是一个意思，这边不会对所有的预处理的css做讲解，less-loader加载器是把css代码转化到style标签内，动态插入到head标签内；我们先来看看我项目的结构如下：
我们现在css文件下有一个main.less 代码如下：
@base: #f938
html,body {
background:@
Src文件下有一个main.js文件&此js文件时入口文件；里面的代码如下：
require('../css/main.less');
webpack.config.js&代码配置如下：
module.exports = {
entry: "./src/main.js",
filename: "build.js",
path: __dirname
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
test: /\.less$/,
loader: "style!css!less"
resolve: {
extensions: ['', '.js', '.jsx']
plugins: []
Gulpfile.js代码如下(注意：这边既可以需要此文件使用gulp进行运行打包，也可以不需要此文件，直接使用webpack进行打包；二种方式任选其一)。
var gulp = require('gulp');
var webpack = require("gulp-webpack");
var webpackConfig = require("./webpack.config.js");
gulp.task('webpack', function () {
var myConfig = Object.create(webpackConfig);
return gulp
.src('./src/main.js')
.pipe(webpack(myConfig))
.pipe(gulp.dest('./build'));
// 注册缺省任务
gulp.task('default', ['webpack']);
因此我们需要安装&style-loader&css-loader&和&less-loader&如下所示：
&安装完成后，我们查看我们的项目的根目录node_modules下多了如下几个文件：
如上配置后，我们进入项目后&运行下&gulp或者&webpack命令既可，在build文件夹内会生成build.js，此JS是动态生成style标签并解释正常的css插入到文档head标签内；我们可以运行下页面，查看代码看下如下：
因此我们可以看到页面生效了；为了更好的demo测试，我把代码放到如下github上，自己可以下载下来运行下既可：
五：理解babel-loader加载器的含义
babel-loader加载器能将ES6的代码转换成ES5代码，这使我们现在可以使用ES6了；我们在使用之前，我们需要安装babel-loader
执行命令：npm&install&babel-loader&&save-dev&如下所示：
如上安装完后，我们在根目录node_modules会生成文件，如下所示：
现在我们可以在webpack.config.js里面moudle.loaders配置加载器了，如下代码：
{test:&/\.js$/,&loader:&'babel',&exclude:&'/node_modules/'}&
因此webpack.config.js代码变成如下：
// 使用webpack打包
module.exports = {
entry: "./src/main.js",
filename: "build.js",
path: __dirname
loaders: [
{test: /\.js$/, loader: 'babel', exclude: '/node_modules/'}
resolve: {
extensions: ['', '.js', '.jsx']
plugins: []
下面我们再来看看我项目中的目录结构如下：
我们在看看src源文件有下面几个文件
React.min.js是react源码，这个不多说，bind.js的ES6的代码如下：
// es6的语法 let LOADER = module.exports = LOADER;
main.js 是页面的入口文件；代码如下：
let loader = require('./bind');
console.log(loader);
let是ES6的语法&相当于js中的var定义变量的含义；&接着打印下bind模块中&打印为true；
最后执行gulp如下：
在控制台中打印true；我把源码放在github上，有需要的同学可以自己下载下来运行下即可；如下github(我2年没有使用github，现在重新使用，为了更好的演示demo问题)；
六：了解下webpack的几个命令
webpack&&&&&&&&&//&最基本的启动webpack的方法
webpack&-w&&&&&&//&提供watch方法；实时进行打包更新
webpack&-p&&&&&&//&对打包后的文件进行压缩
webpack&-d&&&&&&//&提供source&map，方便调式代码
我们下面来了解下&webpack&-w
如下所示：
比如我在js文件里面随便增加一点代码后，保存后，再刷新页面即可可以看到代码生效了，无需重新运行webpack或者gulp，使用webpack -w 可以实时打包。 webpack -p 的含义是对进行打包后的文件进行压缩代码；比如我在之前使用chrome看打包后的代码如下：
如上可以看到，代码是未压缩的，但是当我在控制台命令行中运行&webpack&-p&命令后，如下所示：
我们现在再到控制台上看下代码变成已经压缩后的代码了，如下所示：
webpack&&-d&是提供未压缩之前的源码&方便代码中的调式；如下所示：
当我运行如上所示后，我们再来看看刚才已经压缩后的代码变成什么样子呢？如下所示：
如上代码可以看到&我们进行压缩后的代码，通过运行&webpack&-d&命令后，即可还原未压缩的代码，这样的话就可以方便我们线上调式代码了。
我们再来看看目录下&会生成map文件，如下所示：
七：webpack对多个模块依赖进行打包
& &通过一刚开始我们了解到&webpack支持commonJS和AMD两种模块机制进行打包，因此我们现在来针对代码中使用commonJS和AMD机制进行做一个demo；
Src源文件增加module1.js&module2.js&module3.js&代码分别如下：
module1.js 代码：
// module1.js
require(["./module3"], function(){
console.log("Hello Webpack!");
Module2.js代码如下：
// module2.js，使用的是CommonJs机制导出包
module.exports = function(a, b){
return a +
Module3.js代码使用AMD机制
// module3.js，使用AMD模块机制
define(['./module2.js'], function(sum){
return console.log("1 + 2 = " + sum(1, 2));
// 入口文件 main.js 代码如下：
require("./module1");
我们可以运行下&webpack后&在根目录下生成如下文件：
其中1.build文件夹是commonJS生成的 里面是commonJS的代码；我们再查看页面的代码如下可以看到：
我们继续查看控制台输出如下：
为止我们可以看到webpack打包可以支持commonJS模块和AMD模块。
具体的代码&可以查看我的github上的源码：
八：如何独立打包成样式文件
& & 有时候我们不想把样式打在脚本中，而是想独立css出来，然后在页面上外链css，这时候我们需要&&来帮忙：我们首先需要安装&：如下：&npm&install&extract-text-webpack-plugin&&save-dev&如下所示：
然后在目录下会生成如下：
现在我们需要看看webpack.config.js&配置变成如下：
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 使用webpack打包
module.exports = {
entry: "./src/main.js",
filename: "build.js"
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
test: /\.less$/,
loader: ExtractTextPlugin.extract(
'css?sourceMap!' +
'less?sourceMap'
resolve: {
extensions: ['', '.js', '.jsx']
// 内联css提取到单独的styles的css
plugins: [new ExtractTextPlugin('styles.css')]
配置完成后&我们gulp运行下即可，在build文件夹内会生成2个文件，一个是build.js&处理模块的文件&另一个就是我们的styles.css了；我们查看下如下所示：
接着在html文件这样引入即可：
&!doctype html&
&html lang="en"&
&meta charset="UTF-8"&
&title&Document&/title&
&script src="src/react.min.js"&&/script&
&link rel="stylesheet" href="build/styles.css"/&
&div id="content"&&/div&
在页面上运行以下；即可看到效果：我们可以看下请求数：
具体的代码demo可以看我的github&如下：
注意：node_modules模块没有上传上去，git上传不上去，老是提示Filename&too&long的错误，所以就没有上传，需要自己在本地安装如下模块：
九：如何打包成多个资源文件
& & 我们在开发页面的时候，有时候需要有多个入口文件，做到文件是按需加载，这样就可以使用缓存提升性能；那么我们接下来需要如何配置呢？现在我们继续做demo，现在比如我现在的项目文件结构如下：
我们直接看 webpack.config.js配置代码变成如下：
module.exports = {
"main": "./src/main.js",
"index": "./src/index.js"
filename: "[name].bundle.js"
从上面的配置代码我们可以看到&entry现在变成了一个对象了，而对象名也就是key会作为下面output的filename属性的[name]。当然entry也可以是一个数组。
因此我们直接&gulp运行下即可&在build文件下&生成2个入口文件&如上面的截图所示：github源码地址如下：
现在我们可以根据不同的页面&引入不同的入口文件，实现按需加载文件。
十：关于对图片的打包
我们知道图片是使用url-loader来加载的，我们既可以在css文件里url的属性；如下：
width:<span style="color: #px;
height:60px;
background:url('../images/1.jpg') no-repeat;
我们还可以直接对元素的src属性进行require赋值。如下代码：
var img = document.createElement("img");
img.src = require("../image/1.jpg");
document.body.appendChild(img);
我这边直接来讲第一种在css文件里的url属性进行打包；
首先来看看我项目的目录结构如下：
Css文件&main.css代码如下：
width:<span style="color: #px;
height:60px;
background:url('../images/1.jpg') no-repeat;
JS文件main.js代码如下：
require('../css/main.css');
Webpack.config.js配置文件代码如下：
// 使用webpack打包
module.exports = {
"main": "./src/main.js"
path: './build/',
filename: "build.js"
loaders: [
{test: /.css$/, loader: 'style!css'},
{test: /.(png|jpg)$/, loader: 'url?limit=8192'}
直接运行webpack&可以生成build目录，build目录下会生成2个文件&一个是图片打包后，另外一个是build.js。接着我们再在页面运行下页面，发现有一个问题，如下：
页面调用图片的url是根目录下的，不是我打包后的 build文件夹下，所以会导致图片路径找不到的问题；因此这边有一点点没有完成的任务，希望有兴趣的童靴可以帮助完成~ 不过图片确实是已经打包好了，为了方便，我们还是提供github源码吧！如下所示：
十一：React开发神器：react-hot-loader
&待续..... 由于篇幅有限~~ &这个留给下篇文章讲解。}