一、什么是webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
二、安装
1. 执行npm init，选择默认的下一步就可以了，创建一个package.json文件
npm init
文件夹多了package.json文件。
2.安装webpack，保存依赖到package.json之中
npm install --save-dev webpack
3.直接执行webpack相关的命令会出现问题，"One CLI for webpack must be installed. These are recommended choices, delivered as separate packages"
所以需要安装cli,执行webpack命令的时候会提示，直接选择yes就可以了。
三、demo
例子:
index.html
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
runoob1.js
document.write("It works.");
然后执行打包：
webpack runoob1.js -o bundle.js
后面要有-o, 表示输出的路径，自己本地测试发现不加会出错。
打包css
添加runoob2.js
module.exports = "It works from runoob2.js.";
先安装style-loader, css-loader
npm install --save-dev css-loader style-loader
保存在package.json之中。
然后修改runoob1.js为：
require("!style-loader!css-loader!./style.css");
document.write(require("./runoob2.js"));
然后打包同样的方式生成bundle.js
四、用配置的方式生成bundle.js
module.exports = { entry: "./runoob1.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: /.css$/, loader: "style-loader!css-loader" } ] } };
直接输入命令：
webpack
这样的话会在当前目录生成dist目录，里面有一个main.js。
当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。
webpack --progress --colors
如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。
webpack --progress --colors --watch
我们可以使用 webpack-dev-server 开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开
安装
# 安装 cnpm install webpack-dev-server -g # 运行 webpack-dev-server --progress --colors