【Webpack 学习】1.Webpack的理解与使用

什么是 webpack

   webpack 是德国开发者 Tobias Koppers 开发的模块加载器。

  在 webpack 中所有的文件都将被当做模块使用。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有的这些模块打包成一个或多个 bundle。如图所示：

与 Gulp/Grunt 对比

  webpack 与 Gulp/Grunt 是没有对比性的,因为Gulp/Grunt是一种能够优化前端的开发流程的工具，而 webpack 是一种模块化的解决方案。不过Webpack的优点使得Webpack在很多场景下可以替代Gulp/Grunt类的工具。

  Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。

  webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

webpack的安装及使用 （Demo1 Source）

1. 通过 npm 全局安装 webapck

    $ npm install -g webpack

1. 创建项目并初始化 package.json 文件

    $ mkdir demo1 && cd demo1
    $ npm init

1. 在项目中安装 webpack

    $ npm install webpack --save-dev

–save-dev 是开发时候依赖的东西，–save 是发布之后还依赖的东西

1. 在项目中创建如下文件结构

.        
├── index.html  // 显示的网页
├── main.js    // webpack 入口
└── bundle.js // 通过 webpack 命令生成的文件，无需创建

1. 通过命令对项目中依赖的js文件进行打包

    # webpack 要打包的 js 文件名  打包后生成的js文件名
    $ webpack main.js bundle.js

  在webpack命令后面还可以加入以下参数

• --watch 实时打包
• --progress 显示打包进度
• --display-modules 显示打包的模块
• --display-reasons 显示模块包含在输出中的原因

  更多参数可以通过命令 webpack --help 查看