1、webpack概述：
webpack是一款加载兼打包工具，它能把各种资源，例如J(含JX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理。
2、全局安装：
在安装Webpack之前，我们的本地环境需要支持node.js。安装node.js可以参考node官方文档。
使用如下命令在全局安装webpack
npm install webpack -g
3、webpack的使用步骤
A:JS文件的引用
（1）创建一个名为webpack的文件夹，里面创建两个文件夹，一个是app，一个是build；创建一个名为”webpack.config.js“的配置文件。
（2）在webpack文件夹下执行以下命令，生成package.js文件：
npm init文件内容如下：此文件用来告知一些基本信息
（3）在webpack文件夹下执行以下命令，配置webpack的相关服务：
npm install --save-dev webpack-dev-server经过以上操作，package.json文件中，多出以下一段代码：
（4）配置在第一步创建的webpack.config.js文件：
如图所示：app文件夹中需要有index.js文件，可以随便写一些js代码进去，然后在build文件夹中需要有bundle.js文件，它就是打包文件。
(5）打包文件的使用：
在build文件夹中新建一个index.html文件，引入同目录下的bundle.js文件。
配置快速启动webpack，在package.json文件里加入
"scripts": { "start": "webpack", "server": "webpack-dev-server --open" },到此，我们的package.json文件里的内容是这样的：
如果有哪里不对的，小伙们记得自己检查一下啊。
(6)运行终端，打包js文件到bundle.js
在终端中，定位到当前文件夹webpack---cd 当前目录
然后执行webpack命令，webpack就已经开始运行了：
（7）之后去运行index.html页面，就能看到效果了。
B：CSS文件的引用
经过了引入JS的操作，引入CSS文件的操作就简单多了
（1）首先，我们需要下载css样式加载模板的文件
npm install style-loader css-loader --save
（2）在配置文件中，加入以下代码：
这里尤其需要注意的一点是，在运行终端之前，
需要在index.js文件中，引入index.css文件，以便于二者一并被打包起来。
现在的终端界面是这样的：
细心的小伙伴可能发现了，刚才的那张终端截图，它只监控着index.js的运行，
而上面这张，加入了css的监控和打包，是不是很神奇啊
另外还有一点需要注意的是，加完上述打包css的代码后，需要重新运行打包命令哦，
否则会显示一个“模块加载失败，你可能需要一个适合的加载器加载这个文件”的错误，小伙伴们注意一下哈。
这样，我们就可以在index.html引入包含css和js的bundle.js打包文件了，
在css文件和js文件中编辑会实时在bundle.js中展现在index.html文件中