【Webpack】1.入门及简单使用

什么是 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 查看