1.安装npm
不管你想使用grunt，还是gulp，还是webpack，你都要用到npm，相信大家都对此不陌生了，npm是什么东东呢？npm其实是Node.js的包管理工具（package manager），因为我们使用各种框架会依赖需要多js代码包，而如果需要就到网上搜索下载解压在使用，会非常非常繁琐麻烦，所以npm就应运而生了，它是一个集中管理的工具，大家都会把自己开的模块打包后上传到npm官网，如果要使用直接通过npm下载安装即可。
那么我们怎么安装npm，其实我们在安装node.js的时候npm就已经安装好了，所以我们要先安装node.js，安装完毕后我们就可以在命令行中输入npm -v，来查看npm版本。（命令行工具我在mac下使用的是iTerm2，windows可以安装git bash）
2.什么是webpack
什么是webpack，它有什么优点？
如果你有过gulp或grunt的使用经验，就不难理解webpack是个什么东东，webpack是一个前端工具，可以让各个模块进行加载、预处理，再进行打包，它有gulp和grunt的大部分基本功能，它的最大区别就是提供了模块化解决方案，可以把各种资源作为模块来使用和处理。
webpack的优点如下：
1. webpack 遵循commonJS 的形式，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
2. 能被模块化的不仅仅是 JS ，所有的静态资源，例如css，图片等都能模块化，即以require的方式引入。
3. 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
有一点注意的就是webpack的思路是把我们所有的require资源都整合集成到一个js文件中，我们通常命名为bundle.js
3.安装和配置webpack
接下来我们就开始一步一步的安装使用webpack。（以下以mac为例）
我们先创建项目目录结构，根目录是webpack-demo，结构如下：（源码下载在文末）
app文件夹下放置我们的开发文件，比如 index.scss文件和主逻辑main.js文件，以及作为模块文件的module1.js，将来main.js和module1.js都会整合到public目录下的bundle.js中，我们的index.html直接引用bundle.js即可。public目录就是浏览器执行需要的文件，包括index.html、将来index.sass生成的index.css和bundle.js。webpack.config.js是webpack的配置文件，稍后会详细说明。
原材料准备好了，接下来我们就开始正式安装webpack了。
1.我们首先要在根目录下生成package.json文件，它会显示以后我们通过npm安装的各种依赖包，我们通过终端进入根目录，执行：npm init
然后终端会让我们输入一堆信息，随便写即可。最后输入yes确认，会发现我们的根目录下自动生成了一个package.json文件
内容就是一堆json数据，基本就是我们刚才在终端里输入的信息，大致如下：
package.json生成好了我们先放一放。
2.接下来通过全局安装webpack
在终端执行cd -- 退回到全局，然后执行：（sudo） npm install -g webpack，mac下报错的话前面可能需要加sudo获取管理员权限（下同）。
这样就安装好了webpack，可以再全局通过webpack -v来查看是否安装成功。
3.然后我们进入项目根目录局部安装webpack，进入./webpack-demo，执行：npm install webpack --save-dev
如果看到了这一页说明局部安装webpack成功了。此时根目录下会出现一个node_modules文件夹。
以后我们在根目录下通过npm安装的各种依赖包都会默认安装到这个文件夹下面。
现在我们项目的webpack框架就准备好了，接下来我们要使用它来处理各种东西了，拿最常见的css预处理来说吧，我个人常用sass，那么怎么用webpack来处理sass为我们所用呢，现在就来说说loader加载器。
4. loader加载器。
webpack是通过loader加载器来管理使用各种插件和工具的，比如我们要使用sass，就要通过npm安装sass-loader加载器，然后在之前提到的 webpack.config.js文件中进行配置使用，我们要是使用es6语法，就要安装babel-loader来解析成js语法。接下来以sass-loader为例，
在项目根目录下执行：npm install sass-loader --save-dev
如上图，提示我们已经安装成功了，此时在看package.json文件，会发现与之前有所不同：
没错，它显示了我们刚才局部安装的webpack和sass-loader依赖项。文件默认安装到了node_modules目录下。表示我们已经可以使用sass-loader了。通常对css的处理我们还要在安装style-loader和css-loader。
有一点注意的是，默认sass-loader编译后的css会直接结成到index.html文件的header中去，而我们一般开发中都期望提取出一个css文件，再在html中link引入。所以我们还要用到webpack的plugins插件项目，再安装一个插件extract-text-webpack-plugin。此外还需要安装 style-loader, css-loader。
继续执行： npm install style-loader --save-dev
npm install css-loader --save-dev
npm install extract-text-webpack-plugin --save-dev
可以看到
style-loader和css-loader 和 extract-text-webpack-plugin安装完毕。
接下来终于开始看在webpack.config.js中怎样进行配置使用了。
我们的小飞机组装完毕，进入调试阶段。
5. sass-loader
打开webpack.config.js文件，进行下图配置：
entry是页面中的入口文件，比如我这边的入口文件时main.js
output:是指页面通过webpack打包后生成的目标文件放在什么地方去，我这边是在根目录下生成public文件夹，指示webpack生成bundle.js放到里面
module.loaders：是文件的加载器配置，我们刚才安装了sass-loader，现在要通过extract-text-webpack-plugin插件将编译完成的css单独提取出来供我们使用。具体配置如图。
接下来我们看看index.html和index.scss以及main.js是怎样的。
html：
因为我们最终引用的是public下生成的bundle.js 和 index.css，所以如图写引用路径。这没啥好说的了。
scss：
这里就直接写我们开发中的sass代码，坐等webpack编译成index.css输出到public中。
main.js
主js文件里，我们只引入scss文件，用强大的require语法简单粗暴。
蓝后，我们就可以在命令行执行 webpack -w 来启动webpack了！
关于webpack的启动方式：
webpack // 最基本的启动webpack的方法
webpack -w // 提供watch方法；实时进行打包更新
webpack -p // 对打包后的文件进行压缩
webpack -d // 提供source map，方便调式代码
小飞机，终于要起飞了~！
蓝而。。。。。。
一片片的红海啊。。有点刺眼，我们看看发生了什么，原来是提示没有安装node-sass模块，那么我们继续安装：
npm install node-sass --save-dev
安装报错提示我要安装xcode，经查node-sass依赖xcode安装时一并安装的一些文件，所以我又安装的xcode，再次运行，安装成功。
蓝后，
再次执行 webpack -w：
感动哭。。终于绿了，说明我们的webpack启动成功了，这时候再看文件目录，发现public目录下多了index.css和bundle.js，说明打包成功：
我们直接浏览器打开index.html来看一看页面是否顺利生效。
看来是生效了，控制台也没有报错。说明我们的webpack对sass和js的编译和打包顺利完成！
6. 接下来我们看一下js作为模块怎样来引入使用
我们之前新建了module1.js，我们把这个js文件作为一个模块来引入我们的main.js。编辑module1.js：
我们先在控制台打印一串文本 hello webpack，然后在用exports方式暴露出两个方法供外部调用。
接下来在main.js中require：
我们在main.js中引入模块，然后赋给变量 mod，mod就可以调用模块暴露出来的方法！接下来就是见证奇迹的时刻：
看到这里我已经内牛满面...
我们的小飞机终于起飞了...
至此，webpack基本跑起来了，当然，我们还可以把vue、browserSync集成到webpack中，这里就先不说了，改日再另起文章分别说说browserSync和vue怎样集成到webpack中。
4.最后
说实话这是我的第一篇正式内容的文章，以前傻乎乎的就没想过总结点什么，当然上面的内容也很简陋，介绍的不详细，也很可能会有不严谨或错误之处，限于本人水平，大家有不明白的地方可以搜一下其他大牛的经验，提出来一起进步。最近学习webpack也是翻了很多资料，接下来还要继续深入学习，前端之路，渐行渐远。。。不说了，要下班了，我还要去赶班车...886下了
附本文github源码链接：点此下载
用git克隆到本地：git clone https://github.com/lupinge/webpack-demo.git
打开终端命令行工具进入到对应目录webpack-demo直接执行 webpack -w 即可。
