Webpack学习与总结（一）

经过了半个月的vuejs的学习，可是说是刚刚入了门吧，总之路漫漫，且行且努力，现在开启新篇章——webpack的学习。
今天主要是从总体上来了解下webpack的基本使用过程，从大体上了解webpack,之后在深入的进行学习，循序渐进。

基本概念

官方给出的解释为：Webpack是一个现代的javaScript的应用的静态模块打包工具

前端模块化

在ES6之前，我们要想惊醒模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发，并且在模块化开发完成了项目以后，还需要处理模块化的各依赖，并且将其惊醒打包；而webpack其中的一个核心就是让我们可以进行模块化开发是，并且会帮助我们处理模块间的依赖关系，而且不仅仅是JavaScript文件，我们的css,图片，json文件噔噔在webpack中都可以被当作模块来使用，这就是webpack中模块化的概念。

与grunt/gulp的对比

• grunt/gulb的核心是Task

  • 我们可以配置一系列的task，并且定义task要处理的事务
  • 之后让grunt/gulp来一次执行这些task,而且让整个流程自动胡
  • 所以grunt/gulp也被称之为前端自动化任务管理工具

• 那我们什么时候用grunt/gulp？

• 如果工程模块依赖非常简单，甚至是没有用到模块化的概念

• 只需要进行简单的合并，压缩，就是用grunt/gulp即可

• 但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了

• 二者区别

• grunt/gulp更加强调的是其那段流程的自动化，模块化不是他的核心

• webpack更加强调模块化开发管理，而文件压缩合并，是他附带的功能。

webpack安装

webpack为了能够正常运行，必须依赖于node环境。node环境为了能够正常的执行很多代码，必须其中包含各种依赖的把npm工具。
安装webpack必须首先安装nodejs,nodejs自带了如案件包管理工具npm

• 官网下载对应的nodejs安装包
• 下载完成后，点击安装【网上有很多安装教程，此处不再赘述】
• 查看自己的Node版本
• 全局安装webpack
  
• 局部安装webpack

cd 对应的目录
npm install webpack@3.6.0 --save-dev

• 为什么进行全局安装后，还要进行局部暗转呢？
• 在终端直接执行webpack命令，使用的全局安装的webpack
• 当在package.json定义了script时，其中包含了webpack命令，那么使用的是局部webpack

webpack的基本使用

准备工作

我们需要创建文件和文件夹：
我创建的如下：

• 文件和文件夹解析：
• dist文件夹：用于存放之后打包的文件
• src文件：用于存放源文件
  • main.js:项目的入口文件
  • mathUntil.js:定义了一些数学工具函数，可以在其他地方应用
  • index.html:浏览器打开展示的首页页面
• main.js文件中的代码：

//1.使用commonJS的模块化规范
const {add, mul} = require ('./mathUntil.js')

  console.log(add(20,30));
  console.log(mul(20,30));
//2.shiyonges6的模块化的规范
import {name, age, height} from "./info.js"

console.log(name);
console.log(age);
console.log(height);

• mathUntil.js中的代码：

function add(num1, num2) {
  return num1 + num2
}

function mul(num1, num2){
  return num1 * num2
}
module.exports={
  add,
  mul
}

webpack打包过程

• 创建好项目后，打开terminal,也可以使用控制台工具进行打包
• 输入命令：E:\webstrom\LearnVuejs-v2\ cd 01-webpack的使用
  • 作用：进入到目录下
• E:\webstrom\LearnVuejs-v2\01-webpack的使用\ cd 01-webpack的起步
• E:\webstrom\LearnVuejs-v2\01-webpack的使用\01-webpack的起步>webpack ./src/main.js ./dist/bundle.js
  如果显示如下，则表示打包成功：
  

学习小插曲

在我安装了webpack后，完成项目搭建后，准备打包后，出现了一个错误：
*‘webpack’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。，然后自己网上找了很多相关的错误的解决方法，尝试了很多，可是结果还是没有解决，最后的解决方法是：webstrom要用管理员身份运行，真的是，尝试了所有的方法，结果它的解决方法却那么简单。也正是这样，从另一方面反应出了我应该多学习，多思考。