Vue-webpack配置-3

认识webpack

什么是webpack

官方的解释：

从本质上来讲，webpack是一个现代的javascript应用的静态模块打包工具。

但是它是什么呢？用概念解释概念，还是不清楚

我们从两个点上来解释上面这句话：模块和打包

前端模块化

前端模块化

• 前面，我们用了大量的篇幅解释为什么前端需要模块化。
• 而且也提到了目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6
• 在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。
• 并且在通过在模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。
• 而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。
• 而且不仅仅是javascript文件，我们的css，img（图片），json文件等等，在webpack中都可以被当做模块来使用
• 这就是webpack中模块化的概念。

打包如何理解

• 理解了webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就非常好理解了。
• 就是将webpack中的各种资源模块进行打包合并成一个或多个包（Bundle）。
• 并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss（sass）转换成css，将ES6语法转换成ES5语法，将Typescript 转成javascript等等操作。

• 但是打包的操作似乎grunt/gulp也可以帮助我们完成，他们有什么不同呢？

和grunt/gulp的对比

webpack的安装

安装webpack首先需要安装Node.js，Node.js 自带了软件包管理工具npm

查看自己的node版本

node -v

全局安装webpack（这里我先指定版本号3.6.0，因为vue cli2 依赖该版本）

npm install webpack@3.6.0 -g

局部安装webpack（后续才需要）

--save-dev 是开发时依赖，项目打包后不需要继续使用的。

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

为什么全局安装后，还需要局部安装呢？

• 在终端（cmd）直接执行webpack命令，使用的全局安装的webpack
• 当在package.json 中定义了scripts 时，其中包含了webpack命令，那么使用的是局部webpack

webpack的起步

准备工作

首先我们创建如下文件和文件夹

文件和文件夹解析：

• dist文件夹：用于存放之后打包的文件
• src文件夹：用于存放我们写的源文件
• • main.js:项目的入口文件。详情内容看下面详情
• • mathUtils.js 定义了一些数学工具函数，可以在其他地方引用，并且使用。 详情内容看下面详情
• index.html : 浏览器打开展示的首页html
• package.json : 通过npm init 生成的，npm包管理的文件（现在暂时没有用上，后面才会用上） 可以先安装上

• mathUtils.js 中的代码：

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

function mull(num1, num2) {
   
    return num1 * num2
}

modules.exports = {
   
    add,
    mull
}

• main.js 中的代码：

const math = require('./mathUtils')

console.log('hello webpack');
console.log(math.add(10, 20));
console.log(math.mul(10, 20));

js文件的打包

现在的js文件中 使用了模块化的方式进行开发，他们可以直接使用吗？ 不可以

• 因为如果直接在index.html引入这两个js文件，浏览器并不识别其中的模块化代码。
• 另外，在真实的开发中当有许多这样的js文件时，我们一个个引用非常麻烦，并且后期不方便对它们进行管理。

我们该怎么办？使用webpack工具，对多个js文件进行打包。

• 我们知道，webpack就是一个模块化的打包工具，所以它支持我们代码中写模块化，可以对模块化的代码进行处理。（如何处理的，后面会讲解）
• 另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得非常方便了。

OK，如何打包呢？使用webpack的指令即可

webpack ./src/main.js  ./dist/bundle.js

使用打包后的文件

打包后的文件会在dist文件下，生成一个bundle.js文件

• 文件内容有些复杂，这里暂时先不看，后续再进行分析。
• bundle.js文件，是webpack处理了项目直接文件依赖后生成的一个js文件，我们只需要将这个js文件在index.html中引入即可
</