一、优化项目结构，创建相关的文件,项目结构如下：
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配置文件有很多的参数可以进行设置。以后章节我们将 逐步讲解高级配置以及模块之间的依赖引用。