• webpack【依赖node环境】

• 

• • 什么是webpack？

• • • 从本质上将，webpack是一个现代的JavaScript应用的静态模板打包工具。

• • 前端模块化： 前端模块化是指，通过将前端代码根据一定的规则解耦封装成几个代码文件（模块），并对外暴露特定的接口或方法，然后在项目开发中根据具体情况进化合理的组合的方法，本质上有助于开发效率的提升、提高代码复用率、方便依赖关系管理。目前的前端模块化规范有：AMD、CMD、CommonJS、ES6
  • webpack的其中一个核心就是：让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是JavaScript文件、我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用。
  • webpack打包：就是将webpack中的各种资源模块进行打包合并成一个或者多个包。并且在打包的过程中，还可以对资源进行处理，比如压缩图片、将scss转化成css等。
  • webpack和gulp的对比？

• • • gulp更加强调的是前端流程的自动化，模块化不是他的核心。webpack更加强调模块化开发管理，支持各种模块化规则，而文件压缩合并、预处理等功能，是他附带的功能。
    • gulp的核心是task。我们可以配置一系列的task，并且定义task要处理的事务（例如ES转化等），之后让gulp来执行这些task，而且让整个流程自动化。所以gulp一般被称为前端自动化任务管理工具。
    • 工程模块依赖十分简单，甚至没有用到模块化概念时，只需要进行简单的合并、压缩就使用gulp。如果整个项目使用了模块化管理，而且互相依赖非常强，我们就可以使用更加强大的webpack了

• 使用webpack：

• • 安装：【安装webpack之前首先安装node.js】

• • • 全局安装webpack：npm install webpack@指定版本 -g
    • 局部安装webpack：npm install webpack@指定版本 -D（--save-dev开发时依赖）

• • 为什么全局安装之后还要采用局部安装：在终端直接执行webpack命令，使用的全局安装的webpack。当在package.json中定义了scripts时，其中包含了webpack命令，那么就要使用局部的webpack。

• 简单打包：
• • 一般项目中包含两个文件夹：src【源码】+dist【打包的东西+发布】
  • src中：main.js/index.js作为入口文件，里面要通过模块化方式进行开发
  • 有一个index.html，引用main.js
  • webpack ./src/main.js ./dist/bundle.js 进行打包，后面发布时将dist中的资源和html【引用dist中的bundle.js文件】发给服务器
  • 关于webpack的配置的webpack.config.js【固定的名字】----也可以进行修改，但是要进行相应设置

  •