Webpack的使用场景是单页应用，如果是多网页使用webpack会很痛苦，对于文件的切换等，你需要写多个html输出配置。违背了Webpack的初衷。all is component.webpack
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即可
参考资料：Webpack tutorialswebpack tips
