第一句忠告：千万不要下载最新的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