webpack5基础篇 —— 初识webpack

45 阅读4分钟
webpack也是前端开发老生长谈的问题了,不仅工作中会用到,在面试中也必不可少,是前端开发必须要掌握的知识,那么跟随我的脚步,一起学习webpack5,相信你会有所收获。
**一.什么是webpack?**
    引用百度百科的解释:webpack 是代码编译工具,有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个依赖,此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。简单的说,webpack就是个静态资源打包工具,那我们为什么要使用webpack呢?
**二.为什么要使用webpack?**
    开发时,我们会使用框架(Vue,React),ES6模块化语法,Less/Sass等css预处理器等语法进行开发,这样的代码要想在浏览器运行必须经过编译成浏览器能识别的Js,Css语法才能运行。所以我们需要打包工具帮我们做完这些事。除此之外,打包工具还能压缩代码,做兼容性处理,提高代码性能等。
**三.webpack的五大核心概念**
    介绍五大核心之前,我们先看一个案例,便于后面理解,创建一个文件夹内容如下

1.png 2.png 3.png

在count.js中准备了一个简单的加法函数,然后在main.js中引入count.js,最后在index.html中引入main.js。然后打开浏览器,你会发现浏览器报错:Uncaught SyntaxError: Cannot use import statement outside a module (未捕获语法错误:无法在模块外部使用import语句),这是为什么呢?因为浏览器无法识别ES6中的import语法,所以这时候需要我们的webpack出手了。
**1.初始化文件**
    在项目根目录(名称不能带有中文)下打开终端,输入:npm init -y     

4.png

    你会发现多了package.json文件,这里需要注意的是,name不能和webpack重名。
**2.下载webpack和webpack-cli**
    因为目前学习的是webpack5,所以我们直接下最新版本,在终端输入指令:npm i webpack webpack-cli -D
**3.五大核心概念**
    准备好基本环境之后,我们先来了解一下五大核心概念(重点)
    **1.entry** :指示webpack从哪个文件开始打包
    **2.output**: 指示webpack打包完的文件输出到哪里去,如何命名等。
    **3.loader(加载器)**:webpack本身只能处理js,json资源,其他资源需要借助loader,webpack才能解析
    **4.plugins(插件)**: 扩展webpack的功能
    **5.mode(模式**:
         主要是两种模式:
             开发模式:development
             生产模式:production
   **4.创建配置文件**
       在项目根目录下创建webpack.config.js文件,并进行如下配置    

5.png

    配置完成后,运行 npx webpack 进行打包,打包完后会发现根目录多了一个dist目录,里面是打包成功后的文件。这里使用npx的原因是因为能将node_modules中的.bin文件能够临时作为环境变量。   

6.png

此时我们将index.html文件中的引入路径改成dist下面的main.js,然后在打开浏览器,此时会发现报错已经消失,这代表webpack将浏览器不认识的语法编译成了可以识别的语法。

7.png

**五.开发模式的介绍**
    开发模式就是我们开发代码时使用的模式,这个模式下我们主要做两件事
        1.编译代码,使浏览器能识别运行:开发时我们有样式资源,字体图标,图片资源,html资源等,webpack默认都不能处理这些资源,所以我们要加载配置来编译这些资源。
        2.代码质量检查,树立代码规范:提前检查代码的一些隐患,让代码运行时能更加健壮。提前检查代码规范和格式,统一团队编码风格,让代码更加美观。
        

总结: 到目前为止,我们已经学习了什么是webpack,为什么要使用webpack,以及webpack5的基本打包配置和使用,那这篇初识webpack就先到这里,其他知识点我们后面接着讲。