webpack的介绍和安装，简单使用

1. webpack是什么

webpack 是当下热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
在这里插入图片描述

在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。
并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。
而webpack其中一个核心就是让我们能进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用。
打包就是将webpack中的各种资源模块进行打包合并成一个或多个包(bundle)，并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

2. webpack的安装

首先要安装 Node.js，Node.js 自带了软件包管理器 npm，webpack 需要 Node.js v0.6 以上支持。

2.1 全局安装

npm install webpack -g

此时 Webpack 已经安装到了全局环境下，命令行下输入 webpack -v 可以查看安装的webpack的版本。

使用上述命令安装的是最新版的webpack，如果我们想要安装指定版本的webpack，比如3.6.0版本，可以执行下述命令：npm install [email protected] -g

2.2 局部安装

因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，打包容易出现问题。所以通常一个项目，都有自己局部的webpack。我们会将 webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 webpack。

# 进入项目目录
# 确定已经有 package.json，没有就通过 npm init 创建
# 安装 webpack 依赖
 npm install webpack --save-dev

--save-dev 指的是开发时依赖，项目最终在运行的时候不需要继续使用的
当我们执行完这个安装命令之后，package.json文件中就会多一个 devDependencies

3. webpack的基本使用

一些目录结构的说明：

src：源码文件夹
dist：打包后的文件夹

3.1 简单使用，代码演示

在这里插入图片描述
info.js 文件

// info.js 文件使用 ES6 的模块语法
let name = 'webchang';
let age = 20;
export {
    
    name,age}

mathUtils.js 文件

//mathUtils 文件使用 CommonJS 的模块语法
function add(num1, num2) {
    
    
  return num1 + num2;
}

function mul(num1, num2) {
    
    
  return num1 * num2;
}

module.exports = {
    
    
  add,
  mul
}

main.js文件

//1.使用 commonJS 模块化规范
let {
    
    add,mul} = require('./mathUtils')

//2.使用ES6的模块化规范
import {
    
    name,age} from './info';

console.log(add(10,20));
console.log(mul(10,20));

console.log(name,age);

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

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

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

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

接下来进入通过终端项目目录，执行 webpack ./src/main.js ./dist/bundle.js 命令（webpack 入口文件输出文件）

将第一个src文件夹下的main.js文件打包，生成一个新的文件bundle.js文件，放在dist文件夹下
如果main.js文件依赖了其他文件，webpack会自动处理这个依赖关系
打包成功之后，dist 文件夹下就会多一个 bundle.js 文件

我们创建一个 index.html 文件进行测试，文件中通过script标签引入dist文件夹下的bundle.js文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>测试</title>
</head>
<body>

</body>
<script src="./dist/bundle.js"></script>
</html>

浏览器正确的打印了：
在这里插入图片描述

演示代码下载地址：https://webchang.lanzous.com/iNnlKkf9g4j 密码:8bey

3.2 配置打包的入口和出口参数

我们考虑一下，上边的代码中，如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读取呢？

当然可以！

首先我们在项目根目录下创建一个 webpack.config.js 文件

然后在该文件中进行一些配置

提示：如果项目中需要使用node相关的东西，要使用 npm init 或者 npm init -y 对项目进行初始化，创建一个package.json文件

let path = require('path');            //使用node的path模块

// 入口:可以是字符串/数组/对象，这里我们入口只有一个,所以写一个字符串即可
// 出口:通常是一个对象，里面至少包含两个重要属性，path和filename
module.exports = {
    
    
  entry: './src/main.js',              //入口
  output: {
    
                                //出口
    path: path.join(__dirname,'dist'), //path通常是一个绝对路径，注意 dirname前边是两个下划线
    filename: 'bundle.js'              //打包后的目标文件
  }
}

配置好webpack.config.js文件之后，我们就可以直接使用 webpack 命令进行打包，不需要加上入口和出口路径，此时webpack会自动去 webpack.config.js 文件中寻找打包的入口和出口。
在这里插入图片描述
注意：在终端里敲命令使用的都是全局的，也就是说上边我们敲的 webpack 命令使用的是我们全局安装的 webpack

3.3 继续配置

真实做项目的过程中也很少直接使用webpack命令，而是使用 npm run build ，那么如何做这样一层命令的映射关系呢？我们要在 package.json 文件中的 scripts 中进行配置。

package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。

首先，会在本地的 node_modules/xxx 路径中寻找对应的命令。
如果没有找到，会去全局的环境变量中寻找。

scripts 中定义的都是一些命令，当我们使用 npm run xxx 的时候，就会去package.json文件中的scripts寻找 xxx 命令来执行。
所以我们在scripts中新增一条"build": "webpack"，当我们执行npm run build 的时候，就相当于执行了 webpack 命令。
使用 npm run xxx 的时候，它会优先在项目本地寻找 xxx 命令来执行，如果本地没有，就会去全局中寻找。比如，如果我们没有局部安装（仅在项目中使用的）webpack，只全局安装了webpack。那么执行 npm run build 的时候，就会去执行全局安装的webpack。为什么要这么麻烦呢？因为有版本的存在。在项目中使用的局部安装的webpack版本和全局的webpack的版本可能不一样！

为什么要这么麻烦配置这么多呢？当然这里还体现不出来，当我们使用 vue-cli 进行开发的时候，要执行的命令可能会很长，此时配置一下会更好。