第一句忠告：千万不要下载最新的webpack 可以在npm下载时候加上版本号
比如：npm install --save-dev webpack@xxx -g
首先是现在全局安装 webpack （安装命令中有 -g 就是全局安装）
另外 全局安装请进入到桌面
然后在到项目中安装
以下是我 用的版本号
上面图片 script 中 可以设置 npm中相应的快捷键
比如 wpw ： webpack --watch
正常情况下 你需要在命令行中输入webpack --watch 才能运行
现在只需要 npm run wpw 就可以了
先来实现一个demo
首先新建一个文件夹 demo 然后npm init 以下 就会得到一个package.json的文件
这个文件中有你依赖的所有文件的名字已经版本号 就是我上面那个截图
然后 npm install webpack@xxx 记得带上版本号 你可以通过查看package.json 查看版本号
在demo中创建两个文件夹 src dist
src中是放源码的
dist一般是放你编译过后的代码的
src 中touch 一个 app.js 写一句代码 console.log（‘hello word’）
回到 demo目录 运行：webpack ./src/app.js ./dist/app.bundle.js 前面的是源码地址 后面的时候你想输入的地址已经文件名
如果没报错 并且 dist 出现了一个 app.bundle.js就说明成功了
那么我们不可能每次文件改动都需要重新运行下把 太麻烦了
我们可以通过 webpack ./src/app.js ./dist/app.bundle.js --watch 命令 来监控文件
如果文件改动改动 就自动更新 在监控中的时候 如果你需要用命令行的话你必须重新打开一个窗口
接下来 为了方便使用 来创建下配置文件
在demo目录中创建一个webpack-config.js的文件
写上下面这些内容
entry： 表示输入 在这里设置源码的地址
output：表示输入 在这里设置把文件输出到那个目录 以及文件名
这样设置之后 我们在app.js中更新内容后 直接 在命令行中输入 webpack 就可以运行了
结合上面的快捷键 我们现在 直接输入 npm run wpw 就能监听文件 保持随时更新了
下一步我们要 编译html 文件
先下一个插件 ：html-webpack-plugin 进入官网查看下载方法 同样的要注意版本号
可以在 package.json 中查看是否下载成功
然后修改下配置文件 webpack.config.js
因为 path中以及添加了/dist 的前缀 所以 filename中只要填文件名就行
之后 我们在src中创建一个 html文件 index.html 然后运行 npm run wpw
dist中就会生成 一个index.html的文件 并且自动引入了 app.bundle.js
