webpack是什么
webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。在3.0出现后，Webpack还肩负起了优化项目的责任。
安装webpack
全局安装
首先，打开命令行工具，建立文件夹，进入文件夹里；
mkdir webpack_demo
cd webpack_demo
由于webpack是基于node.js,所以我们先必须安装node.js;安装完成后，执行下一步：
npm install -g webpack
这样就可以全局安装webpack了；但是webpack官方是不推荐的。这会将您项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。
如果安装失败，可能有三种原因：
- node版本过低，你可以通过node -v查看版本信息；
- 网络比较慢，由于npm安装比较慢，你可以通过cnpm或者科学上网，进行安装；
- 如果你使用的是Linux或者Mac，可能是权限问题，请使用sudo；
具体项目安装
首先，初始化文件夹，主要目的是生成package.json文件，里面包含了项目的依赖、自定义脚本任务等等；
npm init
或者
npm init -y
说说着两种的区别，npm init执行后，会让你填写项目信息，而npm init -y执行，是默认给你选择了项目信息，当然你想改的时候，进入package.json可以向直接修改；
然后，安装webpack：
npm init --save-dev webpack
这里的参数–-save是要保存到package.json中，-dev是在开发时使用这个包，而生产环境中不使用。
具体请参考：http://blog.hawkzz.com/2017/03/30/安装依赖/
查看webpack版本
webpack -v
现在(2017/09/17)最新的版本是webpack@3.6.0
建立基本项目结构
在根目录建立两个文件夹，分别是src和dist:
- src文件夹：源代码，用于开发环境；
- dist文件夹：打包好的文件夹，用于生产环境；
编写程序文件
在dist文件夹创建一个index.html文件，并编写下面代码.
/dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div id="title"></div>
<script src="./bundle.js"></script>
</body>
</html>
在src文件夹创建entery.js文件，用于编写javascript代码，也是入口文件；
/src/entery.js
window.onload = function(){
document.getElementById('title').innerHTML = "Hello Webpack!";
}
webpack命令行打包
webpack命令行使用基本方法：
webpack {entry file} {destination for bundled file}
-
{entry file}:入口文件的路径，即将要打包的文件
-
{destination for bundled file}:打包后存放的路径
webpack src/entery.js dist/bundle.js
执行上面的命令，这样就会在dist文件夹里自动生成一个bundle.js 文件，这样就打包完毕；
参考地址：