webpack基础学习-入门篇

本文对webpack做个基础的讲解，后续会陆续推出相关的进阶文章，希望大家可以通过文章能够对webpack有个全新的认识。
本文demo地址：https://github.com/BadMooncc/webpack-demo.git

一、背景

由于现代浏览器到目前为止不支持js的模块化，但随着项目越来越大模块化无疑更易于项目的管理和维护。那么我们需要用但浏览器不支持，怎么办呢。webpack由此诞生。由于webpack基于node平台，所以…你要稍微会一点node。

二、webpack是什么？

webpack是一个用于现代 JavaScript应用程序的_静态模块打包工具_。当webpack处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle

说白了，就是一个模块化的打包工具，可以处理各js模块之间的依赖关系，将其打包成浏览器认识的js文件(现代浏览器到目前为止是不支持js模块化的，如果有一天支持了那webpack也许就要退出历史的舞台了)。

三、webpack四大核心概念

1、入口(entry)：入口文件，webpack将通过递归查找项目的依赖情况，将其打包为一个js文件(给我一个文件还你一片蓝天)

2、出口(output)：打包后的出口配置,如打包后的文件名称，文件夹名称和位置等

3、loader：专门用来处理webpack不认识的文件，毕竟是js，你要让他处理css文件多难为他，所以得安装相关的loader来处理人家不擅长的事

4、插件(`plugin)：：提供一些优化，或者其他的相关配置，比如去console，你想想你要上个线还得手动去掉console，那多费劲。用插件配置一下就能在打包的时候直接去掉(你能想到的插件可以帮你做到，你想不到的…没准也能～)。

四、实战

由于本文是非常入门的基础，所以你可以看到，上边四大核心中的loader和plugin我给加了删除线，并不是说这个配置被webpack官方删除了！！！，而是本文不对这两个配置进行过多介绍，怕刚开始学习的朋友消化不了。

俗话说“光说不练假把式”，更何况写代码～，接下来进入我们的实战演练环节！

1. 初始化项目

创建一个文件夹，我这里叫做webpackDemo，npm少不了，进入文件夹下执行npm init一路回车完事。

要使用webpack我们先来安装他,执行以下命令(建议指定版本，具体原因不做解释)

cnpm install webpack@4.43.0 webpack-cli@3.3.12 -D

接下来，我们新建src/index.js，写一个简单的js代码：

2、使用默认配置打包src/index.js代码

直接执行 npx webpakck --mode=development,为了能清楚看以下打包后的代码我们指定模式为开发模式(如果不指定默认mode=production)，可以看到，打包后目录下多了一个dist文件夹，里边有个main.js就是我们打包后的js文件。

直接执行命令可以打包是因为webpack有默认的配置，比如默认的入口(entry)是src/index.js，默认出口dist/main.js。

查看dist/main.js文件，会发现代码已经被打包到了main.js里,如下: 。

3、自定义webpack配置

默认配置肯定是不足以支持我们多样的开发环境的。接下来我们自己定义webpack配置。
依旧是在webpackDemo的根目录下新建一个webpack.config.js文件
。
如上图所示：模式我们设置为development,入口则是我们定义入口文件的相对路径，output定义文件输出到当前根目录下的lib文件夹下。接下来直接在命令行中输入webpakck，就可以看到文件生成了一个lib文件夹，lib/main.js则是我们打包过后的文件。当然我们也可以将mode设置为production，你会发现打包后的文件是被压缩过的。

4、验证webpack的依赖处理

上边我们也说了，webpack可以通过入口文件处理模块间的依赖关系。为了方便验证webpack会将所有依赖打包在一起接下来我们在src下新建个utils/index.js文件写入如下代码：

export default function() {
  console.log('小狗在跑步');
}

接下来在入口文件中导入:

import running from './utils/index.js';
class Dog {
  constructor(name) {
    this.name = name;
  }
  running() {}
}
const dog1 = new Dog();
dog1.running = running;
dog1.running();

然后执行webpack命令(记得先手动删除掉老得lib文件夹)，接着我们再去lib/main.js中查看下最新的代码会发现使用import导入进来的这个方法也被打包到了main.js中：

到这里webpack最最最最最基基基基础的用法就完成啦。是不是顿时感觉特别容易。但是这里边还有很多问题！

5、存在的问题

• 打包后的js还是es6的语法，并没有被转为es5的语法
• 无法将css之类的文件打包
• 打包后的文件名想加hash怎么做等等

小结

要解决上边列举一系列的问题，其实就用到了webpack的第三个核心——loader,有了loader，我们也可以让webapack打包.css、.scss、.vue等一系列的文件，甚至你可以自己写loader来解析对应的文件。当然本文后续会继续推出相关文章，在本次demo的基础上继续完善我们的webpackDemo项目。