先装好node和npm，因为webpack是一个基于node的项目。然后
npm install -g webpack ?全局安装2、建立项目
建立项目文件夹，进入项目文件夹目录下，然后新建一个package.json的文件在项目根目录下
mkdir testwebpackcd ?testwebpacknpm init ?//询问一些问题:按回车选择默认值 自动生成文件至此，webpack安装完成3、在命令行中分别执行以下命令，安装对应的插件（--save-dev作用是安装的插件的同时，将插件名写入package.json的devDependencies列表中）
npm install webpack --save-dev
npm install jquery --save-dev
npm install style-loader css-loader --save-dev
npm install extract-text-webpack-plugin –-save-dev
4、创建webpack.config.js
module.exports = { ?entry: ‘./main.js‘, ?/*你要打包的js文件*/ ?output: { ???filename: ‘bundle.js‘ ?/*打包后生成的文件*/ ?}, ??module: { ???????rules:[ ?????????{ ???????????test: /\.css$/, /*引入css文件配置*/ ???????????use: [ ‘style-loader‘, ‘css-loader‘ ] ?????????}, ???????] ?}, ?module: { ???????rules:[ ?????????{ ???????????test: /\.(png|jpg)$/, /*引入图片文件配置*/ ???????????use: [ ?????????????{ ???????????????loader: ‘url-loader‘, ???????????????options: { ?????????????????limit: 8192 ???????????????} ?????????????} ???????????] ?????????} ???????] ???}};配置文件参数说明：
- entry： 是 页面入口文件配置 （html文件引入唯一的js 文件）
- output：对应输出项配置
- path ：入口文件最终要输出到哪里，
- filename：输出文件的名称
- publicPath：公共资源路径
- webpack：普通打包
- webpack -p：压缩打包
- webpack -p -w：监听所有需要打包的代码，只要有代码被改动并保存后，就会自动进行打包
webpack教程
原文地址：http://blog.51cto.com/9161018/2322619