Webpack3——使用

1. 首先创建一个目录

2. 进入该目录

3. 用 npm init 初始化npm项目
   

   初始化

   
   初始化项目时，会给定很多问题，这里我将entry port改为bundle.js了，其余一律默认，如图：
   

   npm init

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

   
   

   package.json

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

   
   

   install webpack

   
   

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

   
   

   node-modules

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

   打包

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

   
   

   目录结构

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

   
   

   html中引入打包后的文件

5. 自动监测修改后的文件，只需要添加参数：--watch
   webpack --watch ./src/bundle.js ./dist/app.bundle.js

6. 编译后的文件太大了，需要对它进行压缩，此时用参数-p
   webpack -p ./src/bundle.js ./dist/app.bundle.js

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

作者：椰果粒
链接：https://www.jianshu.com/p/af24240806a1