1.安装npm
无论你想使用 grunt、gulp 还是 webpack，你都必须使用 npm。 相信大家对此都很熟悉了。 什么是 npm？ npm好像是Node.js的包管理器，因为我们在使用各种框架的时候，需要多个js代码包，如果需要的话，在网上搜索、下载、解压会非常复杂和麻烦，所以npm应该被使用而生，它是一个集中管理工具，你将自己的模块打包上传到npm官网，如果你想使用它，可以直接通过npm下载安装。
那么我们如何安装npm呢，虽然我们在安装node.js的时候已经安装了npm，所以我们需要先安装node.js，安装完成后我们可以在命令行输入npm -v来查看npm版本。 （命令行工具我在mac下使用iTerm2，windows可以安装gitbash）
npm-v
2.什么是webpack
什么是 webpack，它有哪些优点？
如果你有使用 gulp 或 grunt 的经验，那么理解 webpack 是什么并不难。 Webpack 是一个后端工具，允许加载模块、预处理然后打包。 它具有 gulp 和 grunt 的大部分基本功能，其最大的区别在于它提供了模块化的解决方案，可以将各种资源作为模块来使用和处理。
webpack的优点如下：
1. webpack遵循commonJS方式，同时也全面支持AMD/CMD，方便老项目的代码迁移。
2、不仅仅是JS可以模块化，所有的静态资源，比如css、图片等都可以模块化，即以require的形式引入。
3. 易于开发，可以替代一些grunt/gulp任务，例如打包、压缩和混淆、图像转换为base64等。
需要注意的一点是，webpack的思想是将我们所有需要的资源整合到一个js文件中，我们一般将其命名为bundle.js
3.安装并配置webpack
接好之后，我们就开始一步步安装和使用webpack了。 （以下以mac为例）
我们首先创建项目目录结构，根目录为webpack-demo，结构如下：（源码下载在文末）
项目结构
将我们的开发文件放在app文件夹下，例如index.scss文件和主逻辑main.js文件，以及module1.js作为模块文件。 将来，main.js 和 module1.js 将集成到 public 目录下的包中。 js，我们的index.html可以直接引用bundle.js。 public目录是浏览器执行所需的文件，包括index.html、index.css以及以后index.sass生成的bundle.js。 webpack.config.js 是webpack的配置文件，后面会详细解释。
原材料准备好了，收到后我们就开始安装webpack了。
1、我们首先需要在根目录生成一个package.json文件，该文件会显示我们通过npm安装的各种依赖包。 我们通过终端进入根目录，执行：npminit
npminit
之后终端会让我们输入一堆信息，你想写什么就写什么。最后输入yes确认，你会发现我们的根目录下已经手动生成了一个package.json文件
包.json
内容是一堆json数据启动webpack，基本上就是我们刚才在终端输入的信息，大致如下：
包.json
package.json生成了，我们先收起来。
2.取出来并全局安装webpack
在终端执行cd --返回全局，然后执行：(sudo) npminstall-gwebpack，如果mac下报错，可能需要添加sudo获取管理员权限（下同）。
这样，webpack就安装好了，可以全局通过webpack -v 查看安装是否成功。
3、然后我们进入项目根目录本地安装webpack，进入./webpack-demo，执行：npminstallwebpack --save-dev
npm 安装 webpack --save-dev
如果你听到这个页面，说明 webpack 部分安装成功。 此时根目录下会出现一个node_modules文件夹。
节点模块
之后我们在根目录下通过npm安装的各种依赖包都会默认安装在这个文件夹下。
现在我们项目的webpack框架已经准备好了，我们将用它来处理各种事情。 我们以最常见的css预处理为例。 我个人用的是sass，那么如何使用webpack来处理sass供我们使用呢，现在来说说loader加载器。
4.装载机装载机。
webpack通过loader加载器来管理各种插件和工具的使用。 比如我们要使用sass，就需要通过npm安装sass-loader加载器，然后在前面提到的webpack.config.js文件中进行配置。 如果我们使用es6句型，我们需要安装babel-loader来解析成js句型。 以 sass-loader 为例启动webpack，
在项目根目录下执行：npminstallsass-loader --save-dev
npm 安装 ass-loader --save-dev
如上图所示，提示我们已经安装成功了。 这时候我们再看package.json文件，会发现和之前不一样了：
包.json
没错，它显示了我们刚刚部分安装的 webpack 和 sass-loader 依赖项。 默认情况下，这些文件安装在 node_modules 目录中。 这意味着我们已经可以使用 sass-loader 了。 一般我们需要安装style-loader和css-loader来处理css。
需要注意的一点是，默认的 sass-loader 编译出来的 CSS 会直接链接到 index.html 文件的头部，而我们通常期望在开发时提取一个 CSS 文件，然后导入到 HTML 中的链接中。 所以我们还需要使用webpack的plugins插件项目，然后安装一个插件extract-text-webpack-plugin。 据悉，还需要安装style-loader和css-loader。
继续执行：npminstallstyle-loader --save-dev
npm 安装 css-loader --save-dev
npm 安装 lextract-text-webpack-plugin --save-dev
可以看到
包.json
style-loader 和 css-loader 以及 extract-text-webpack-plugin 已安装。
拿起它之后，我终于开始了解如何在webpack.config.js中配置和使用它。
我们的小飞机已经组装完毕，正在进入调试阶段。
5. sass加载器
打开webpack.config.js文件并进行如右图配置：
webpack.config.js
Entry是页面中的入口文件，比如我这边的入口文件是main.js
输出：指页面经过webpack打包后生成的目标文件放置的位置。 我在根目录生成一个public文件夹，并指示webpack在其上生成bundle.js
module.loaders：是文件的loader配置。 我们刚刚安装好了sass-loader，现在需要通过extract-text-webpack-plugin插件将编译好的css单独提取出来供我们使用。 具体配置如图所示。
拿出来看看index.html和index.scss以及main.js是什么样子的。
html:
索引.html
由于我们最终引用了public下生成的bundle.js和index.css，所以引用路径如图所示编写。 对此没什么好说的。
CSS：
索引.scss
这里我们直接编写我们正在开发的sass代码，等待webpack将其编译成index.css并输出给公众。
main.js
main.js
主js文件中我们只导入scss文件，使用强大的require句型简单粗暴。
蓝色之后我们就可以在命令行执行webpack -w来启动webpack了！
关于webpack的启动方法：
webpack//webpack最基本的启动方式
webpack-w//提供观看技巧； 实时包更新
webpack -p //压缩打包后的文件
webpack-d//提供sourcemap，方便缩放代码
小客机终于要起飞啦~！
蓝色和。 。 。 。 。 。
错误
碎红海啊。 。 有点眼花缭乱，让我们看看发生了什么。 原来是node-sass模块没有安装，所以我们继续安装：
npm 安装node-sass --save-dev
安装错误提示我安装xcode。 经过检查，node-sass依赖于xcode安装时安装的一些文件，于是我重新安装了xcode，再次运行，安装成功。
蓝色女王,
再次执行webpack -w：
webpack -w
感动得哭了。 。 最后变成绿色，说明我们的webpack启动成功了。 这时我们查看文件目录，发现public目录下多了index.css和bundle.js，说明打包成功：
是的
我们直接在浏览器中打开index.html，看看页面是否顺利生效。
索引.html
看来已经生效了，控制台也没有报错。 说明我们的webpack对sass和js的编译打包已经顺利完成了！
6、我们看一下js是如何作为模块引入和使用的
我们之前创建了一个新的 module1.js，并将这个 js 文件作为模块引入到我们的 main.js 中。 编辑 module1.js：
模块1.js
我们首先在控制台复制一串文本hellowebpack，然后以exports的形式暴露两个方法供外部调用。
取出来，在main.js中require：
main.js
我们在main.js中引入模块，然后将其赋值给变量mod，mod就可以调用模块暴露的方法了！ 接下来就是见证奇迹的时刻了：
html
当我听到这句话的时候，我已经充满了勇气……
我们的小客机终于起飞了……
至此，webpack已经基本跑起来了。 其实我们也可以将vue和browserSync集成到webpack中。 我这里就不讲了。 我会再写一篇文章来谈谈browserSync和vue如何集成到webpack中。
4.最后
说实话，这是我第一篇关于内容的文章。 我没想过总结一下。 其实里面的内容也很狭窄，介绍的并不详尽，可能存在不严谨或者错误的地方。 限于我自己的水平，如果有不懂的地方，可以搜索一下其他大牛的经验，提出来，共同进步。 最近学习webpack翻了很多资料，收到之后还要继续深入学习，通往后端的路越来越远了。 。 .更何况，我还要上班，还要赶公交车……886
附本文github源码链接：点此下载
使用 git 克隆本地：gitclone
打开终端命令行工具，进入对应目录webpack-demo直接执行webpack-w。
