Webpack的使用场景是单页应用，如果是多网页使用webpack会很痛苦，对于文件的切换等，你需要写多个html输出配置。违背了Webpack的初衷。all is component.

webpack is a module bundler.

目录结构：

.├── build  #编译打包之后的输出│   ├── bundle.js│   └── index_.html├── css #css│   ├── indexv5_6.css│   └── indexv8.css├── index.html├── node_modules│   ├── css-loader│   ├── html-webpack-plugin│   ├── style-loader│   ├── uglify-loader│   ├── webpack│   ├── webpack-load-plugins│   └── zepto├── package.json #npm script├── src    ＃源文件│   ├── test.js│   └── zepto.min.js└── webpack.config.js #配置文件

{  "name": "uranus_ebiz",  "version": "1.0.0",  "description": "test webpack",  "scripts": {    "start": "webpack --config webpack.config.js --progress --colors"  },  "author": "ty4z2008",  "license": "MIT",  "dependencies": {    "zepto": "^1.2.0"  },  "devDependencies": {    "css-loader": "*",    "html-webpack-plugin": "^2.22.0",    "style-loader": "*",    "uglify-loader": "^1.3.0",    "webpack": "*",    "webpack-load-plugins": "^0.1.2"  }}

编辑好package.json后执行npm install。

//webpack.config.jsconst webpack = require("webpack");const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {	entry:["./src/zepto.min.js","./src/test.js"],//入口文件配置	output:{//输出配置		filename:"bundle.js",		path:__dirname+"/build/"	},	module:{		loaders:[//加载器			{test:/\.css$/,loader:"style!css"} //parse css		]	},	plugins:[//插件项		new webpack.optimize.UglifyJsPlugin({			compress:{				warnings:false,			},			output:{				comments:false			}		}),		new HtmlWebpackPlugin({			filename:'index_.html', //输出的文件名			inject:'body',//inject all scripts into the body			hash:true //文件hash后缀		})	]}

最后运行：npm start即可

参考资料：