0 建议最好全局先安装一下webpack
npm install webpack -g
1 新建一个文件夹，打开该文件夹，初始化package.json文件，安装好webpack依赖 （都是基础的linux命令操作，必会）
mkdir webpack-demo && cd webpack-demo //新建webpack-demo文件夹并打开该文件 npm init -y //初始化package.json文件，-y可以省去一大通的默认回车设置 npm install --save-dev webpack //添加到package.json的devDependencies中
2 程序根目录下创建 src/js 文件夹，新建index.js文件
function component () { var element = document.createElement('div'); /* 用到了lodash插件中方法 */ element.innerHTML = _.join(['Hello','webpack'], ' '); return element; } document.body.appendChild(component());
3 新建 index.html文件
<html>
<head>
<title>webpack 2 demo</title>
<!--引入lodash插件，顺序必须在index.js之前-->
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="app/index.js"></script>
</body>
</html>
到目前为止，在浏览器中打开index.html文件，可以看到hello webpack，没有问题。但是此时任意的移动引得的js文件的位置，（如颠倒lodash和index.js的位置），页面就会报错。此时页面中才仅仅是只有两个js文件，若是文件比较多，依赖关系比较复杂的，更是麻烦。
接下来就是webpack改造的时候。
4 首先安装lodash依赖
npm install --save lodash
5 改造 index.js文件，在文件的顶部引入 lodash模块
import _ from 'lodash'; function component () { ...
6 改造index.html文件，取消对lodash插件的引用，只引用一个bundle.js文件即可，该文件是原来的文件的一个合并汇总，具体如何合并，继续往下走。
<html>
<head>
<title>webpack 2 demo</title>
//<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
//<script src="app/index.js"></script>
<script src="dist/bundle.js"></script>
</body>
</html>
7 合并生成bundle.js文件
webpack src/js/index.js dist/bundle.js
此时运行index.html文件仍然能正常运行。同第三步之后的效果一致。
除了上面这种方法，还可以通过webpack.config.js的方式进行改造。
8 新建webpack.config.js配置文件（path是nodejs中提供的一个关于路径的小工具）。该配置文件可以对模块的加载规则（webpack不仅可以处理js还有css等，一切皆模块），插件，其他的增强服务等等进行预配置。然后直接执行该配置文件也可以取得和上一个改造方法一样的效果。
var path = require('path'); module.exports = { entry: './src/js/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };
webpack --config webpack.config.js //执行该配置文件
至此，我们已经罗列了两种解决方法，一种是通过第七步合并生成bundle.js的方式，一种是通过配置文件的方式，当然也可以直接将配置文件添加到package.json的选项中，如下。
{ ... "scripts": { "build": "webpack" }, ... }
配置好了以后，直接运行
npm run build
同第八步的直接执行webpack 相关命令是一样的效果。
好了，第一篇入门导引到此结束！！！