Webpack3——使用

1. 首先创建一个目录
2. 进入该目录
3. 用 npm init 初始化npm项目
   初始化
   初始化项目时，会给定很多问题，这里我将entry port改为bundle.js了，其余一律默认，如图：
   npm init

4. 此时在demo2文件夹中生成了一个package.json文件

   
   package.json

5. 虽然在全局安装了Webpack，在项目里边还要安装一遍

   
   install webpack
   

   此时查看package.json文件，会发现多了一个依赖包

   
   node-modules
6. 此时可以进行打包了
   webpack ./src/bundle.js ./dist/app.bundle.js
   这句话表示将 src目录下的bundle.js文件打包到dist目录下的app.bundle.js文件（此文件第一次会自动生成）
   打包

7. 此时可以新建一个index.html目录来检验是否打包成功

   
   目录结构

8. html中引入打包后的文件

   
   html中引入打包后的文件
9. 自动监测修改后的文件，只需要添加参数：--watch
   webpack --watch ./src/bundle.js ./dist/app.bundle.js
10. 编译后的文件太大了，需要对它进行压缩，此时用参数-p
    webpack -p ./src/bundle.js ./dist/app.bundle.js

此时给js文件添加点内容，可以发现正常打包成功了。