1、首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要Node.js v0.6 以上支持，建议使用最新版 Node.js。

2、安装Webpack 到全局环境下 ：

npm install webpack -g //（可以通过命令行 webpack -h 或webpack -v 验证）

3、将 Webpack 安装到实际项目的依赖中，这样就可以使用项目本地版本的 Webpack。

 npm install webpack --save-dev  //查看 webpack 版本信息 : npm info webpack//安装指定版本的 webpack: npm install webpack@1.12.x --save-dev

4、确定是否有 package.json，没有就通过 npm init 创建

5、安装Loader转换器（只需要在本地安装，不需 -g）(Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。）

//常用的转换插件
npm install css-loader style-loader//转换CSS
npm install postcss-loader --save-dev
npm install url-loader  //转换图片
npm install expose-loader --save-dev //暴露
npm install babel-loader babel-core 或 npm install jsx-loader  // jsx转换
npm install less less-loader --save-dev //
npm install babel-preset-es2015  //ECMAScript6语法依赖

6、配置

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');module.exports = {//页面入口文件配置entry: {index : './src/js/page/index.js'},//入口文件输出配置output: {path: 'dist/js/page',filename: '[name].js'},module: {//加载器配置loaders: [//.css 文件使用 style-loader 和 css-loader 来处理{ test: /\.css$/, loader: 'style-loader!css-loader!postcss-loader' },//.less 转换loader{ test: /\.less$/, loader: "style-loader!css-loader!less-loader" },//.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},//.js 文件使用 jsx-loader 来编译处理{ test: /\.jsx$/, loader: 'jsx-loader?harmony' },//图片文件使用 url-loader 来处理，小于8kb的直接转为base64{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},//ECMAScript6语法依赖{ test: /\.jsx?$/,exclude: /node_modules/, loader: 'babel',query: {presets: ['es2015', 'react']}}]},//插件项plugins: [commonsPlugin],//其它解决方案配置(webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./js/my.js"),但是这样过于复杂，我们可以通过这个配置项使得后面开发工作更加方便。)resolve: {//root: 'E:/github/flux-example/src', //绝对路径//自动扩展文件后缀名，意味着我们require模块可以省略不写后缀名extensions: ['', '.js', '.json', '.scss'],//模块别名定义，方便后续直接引用别名，无须多写长长的地址alias: {my: './js/my.js', //后续直接 var 标识符 = require('my') 即可 //标识符首字母不强要求大小写，eg：my 或 Myapi: './api.js'}}
};

⑴ plugins 是插件项，这里我们使用了一个 CommonsChunkPlugin 的插件，它用于提取多个入口文件的公共脚本部分，然后生成一个 common.js 来方便多页面之间进行复用。

⑵ entry 是页面入口文件配置，output 是对应输出项配置（即入口文件最终要生成什么名字的文件、存放到哪里）。