一、优化项目结构，创建相关的文件,项目结构如下：
src文件夹存放相关js文件，index.html项目的首页面，dist文件夹是webpack 打包 目录。
index.js内容为：
alert('我就是webpack');
index.html内容为:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="bundle.js"></script> </head> <body> </body> </html>
这里引用bundle.js是用webpack编译之后的文件，这里不要写src/index.js，如果index.js里面涉及到require('./a')这样的语法，不经过编译浏览器是无法识别的。
二、创建 webpack.config.js
如果对 gulpfile.js和Gruntfile.js比较了解的话， 对webpack.config.js就比较容易了解，webpack.config.js是webpack的入口，里面配置webpack运行时的相关的参数。webpack.config.js就是webpack的指挥官，他来指挥webpack都是做哪些事情，如何去做。
创建之后的目录结构：
三、WebPack的配置
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
//页面入口文件配置
entry: {
index: './src/index.js'
},
//入口文件输出配置
output: {
path: __dirname,
filename: "bundle.js"
}
}};
第一步、使用require 导入webpack
var webpack = require('webpack');
把这句话当作 在html页面使用<script src="webpakc.js"></script>引用webpack文件。
第二步:声明webpack提供的提取文件公共部分的对象
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
CommonsChunkPlugin 是webpack的一个插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。 什么意思哪？例如:
a.js
function a(){
}
b.js
function a(){
}
a.js和b.js都同样有a函数，如果一个js文件同时引用这两个js文件，webpack 在运行的时候会把这两个函数提取到common.js文件，并且只留下一个，因为它们相同。
第三步：使用module.exports配置webpack的相关参数和方法
-
entry 是页面入口文件配置，
-
output 是对应输出项配置 （即入口文件最终要生成什么名字的文件、存放到哪里），__dirname表示当前项目的目录，nodejs语法。
第四步、执行编译命令
目前为止webpack的基本配置都已经完成了， 这个时候就需要在项目根目录，执行webpack编译命令。
webpack
这个时候项目中就会生成bundle.js文件，bundle.js文件的内容如下：
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {
alert('我就是webpack');
/***/ }
/******/ ]);
第五 步、 运行index.html
目前为止所有的工作都已经做完了，这个时候运行index.html文件
四、总结
webpack的使用非常的方便，只需要安装、配置、 执行命令，就可以完成了。webpack配置文件有很多的参数可以进行设置。以后章节我们将 逐步讲解高级配置以及模块之间的依赖引用。