【webpack快速入门】如何手动给项目配置一个webpack打包工具?

·  阅读 402
【webpack快速入门】如何手动给项目配置一个webpack打包工具?

前言

大家好,我是东东吖 , 一名前端工程师,随着工作的深入,想要成为一名【高级前端工程师】,就不得不学习更加深入的内容,如前端工程化前端动画框架原理与源码全栈开发泛客户端开发...,webpack属于【前端工程化】的内容,通过学习webpack,你会了解编译原理,前端性能优化相关的知识。

大家想要学习webpack,却不知如何下手???今天我将带领大家开始学习从0到1学习webpack,帮助大家快速入门webpack。

模块打包工具的由来

模块化带来的问题?

  • ES Modules 存在环境兼容性问题
  • 模块文件过多,网络请求频繁
  • 所有的前端资源都需要模块化

针对模块化带来的问题,我们提出一些设想呢?

  • 设想一: 在开发阶段我们使用的es5、es6的语法,但是生产环境需要只运行es5的语法,那么有没有一种工具将es6及以上的新特性编译成es5提供给生产环境运行。

  • 设想二: 在开发阶段,我们的项目文件都是散落的,而这样会导致浏览器频繁对模块发出请求的问题,那么有没有一种工具,可以将这些散落的文件,打包在同一个文件当中提供给生产环境运行。

  • 设想三: 在开发阶段,需要支持不同的前端资源如样式(css、scss)、图片、字体、js、ts等等所有资源文件模块使用,有没有一种工具将他们统一打包在一起处理成bundle.js、.css、.png等资源呢?

针对前两个设想,我们可以通过一些构建系统编译工具就可以解决了,而对于设想三,我们就很难做到了,所以接下来就引入了我们的主题:前端模块化打包工具

  • 新特性代码的编译
  • 模块化JavaScript 打包
  • 支持不同类型的资源模块

模块打包工具概要

前端目前主流的模块打包工具有哪些?

  • Webpack webpack是一个打包工具,他的宗旨是一切静态资源皆可打包。可以将不同模块的文件打包整合在一起,并且保证它们之间的引用正确,执行有序。当webpack处理您的应用程序时,它会在内部构建一个依赖关系图,映射项目所需的每个模块,并生成一个或多个捆绑包。

Webpack支持所有流行的模块选项,并已成为React开发的代名词。虽然Webpack声称是一个模块捆绑程序,但是已经可以用作通用任务运行程序了。

  • Parcel Parcel 是一款 极速零配置Web应用打包工具

Parcel有以下这些特点:

很快

捆绑项目的所有资产

没有配置代码拆分
复制代码
  • Rollup

Rollup 是一个 JavaScript 模块打包器,可以将小块代码编译成大块复杂的代码,将模块文件根据命令或者根据rollup.config.js配置文件将多个模块文件打包成一个文件,然后就可以通过HTML的<script>标签去导入这一个结果文件即可,从而使代码最小化,并且Rollup会自动过滤掉那些没有被使用过的函数或变量。

  • vite vite号称下一代前端开发与构建工具,越来越多的开发者在拥抱vite。Vite是Vue的作者尤雨溪开发的Web开发构建工具,它是一个基于浏览器原生ES模块导入的开发服务器,在开发环境下,利用浏览器去解析import,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随启随用 。同时不仅对Vue文件提供了支持,还支持热更新,而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包

Vite具有以下特点:

   快速的冷启动

   即时热模块更新(HMR,Hot Module Replacement)

   真正按需编译
复制代码

Vite是在推出Vue 3的时候开发的,目前仅支持Vue 3.x,这意味着与Vue 3不兼容的库也不能与Vite一起使用。

介绍了模块打包工具概要,以Webpack为例,就可以解决我们刚刚提出的设想:

  • 模块打包器(Module bundler):JavaScript 打包,将零散的文件打包在一起
  • 模块加载器(Loader):对于环境兼容的代码进行编译转换
  • 代码拆分(Code Splitting):按照需要将代码进行打包,就不会出现所有文件都打包在一起,我们可以将应用加载过程当中初次运行的必须得模块打包在一起,而其他模块我们再单独存放。在应用需要的时候再去异步加载这些模块,叫分量加载。我们就不用担心文件太碎或者文件太大这两种极端情况。

Webpack快速入手

打包工具解决的是前端整体的模块化,而不是单指JavaScript模块化,webpack作为前端模块化打包工具解决方案,目前已为绝大多数现代web应用提供技术支持。

创建一个Webpack文件夹,在里面创建一个src文件夹和index.html,在src文件夹下面创建index.js和common.js,在common.js中编写方法暴露出来,在index.js中引入调用,在index.html,使用 type="module",模块化加载index.js

image.png

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack-快速入门</title>
</head>
<body>
    <h1>http-server启动了</h1>
    <script type="module" src="/src/index.js"></script>
    
</body>
</html>
复制代码
//index.js

// 有点类似Java导入,这里teacher随意命名
import teacher from './common.js'
// 一定要带上teacher
teacher.getList()
teacher.save()
复制代码
//common.js 


// 有点像类定义
export default {
    getList() {
        // ajax调用
        console.log('东东吖,获取讲师列表')
    },
    save() {
        // ajax调用
        console.log('东东吖,保存讲师')
    }

}
复制代码

做好了以上webpack项目的准备工作,我们需要工具http-server来启用它。

Http-server是一个轻量级的基于nodejs的http服务器,它最大好处就是:

可以使任意一个目录成为服务器的目录,完全抛开后台的沉重工程,直接运行想要的js代码。

//全局安装http-server

npm i -g http-server
复制代码
//在要成为服务器的目录下运行如下命令运行

http-server
复制代码
//若要禁用缓存,请使用如下命令运行 

http-server -c-1
复制代码

我们Webpack文件夹目录下打开控制终端。执行http-server -c-l,就会弹出地址,然后把地址复制在浏览器,在vscode里面可以按住Ctrl,鼠标点击地址,就会直接打开浏览器。

image.png

这样我们的http-server就成功启动了,并在模块化执行了js,在控制台可以看见我们想要的结果

image.png

准备工作做完了之后,接来下进入我们的主题,我们使用yarn 去初始化一个package.json安装包。 如果是习惯用npm或者pnpm的同学,可以用类似的方法下载,或者安装yarn,再用yarn来下载 。

//安装yarn 
npm install -g yarn

//查看yarn的版本
yarn --version


//设置淘宝源
yarn config set registry https://registry.npm.taobao.org -g
复制代码
//初始化一个package.json安装包

yarn  init  --yes
复制代码

image.png

//安装webpack核心模块和webpack CLI

 yarn add webpack webpack-cli --dev
复制代码

webpack、webpack-cli 的区别 执行 webpack 命令,会执行 node_modules 下的 .bin 目录下的 webpack 文件;webpack 的执行依赖 webpack-cli 的,如果没有安装webpack-cli 就会报错,在 webpack-cli 中代码执行时,才是真正利用 webpack 进行编译和打包的过程。

image.png

//使用webpack打包

yarn  webpack
复制代码

打包之后,我们就可以在项目里面发现一个dist文件,webpack会自动从src下的index.js开始打包。

sr/index.js  ===>  dist/main.js
复制代码

image.png

我们再次启动http-server,可以看见,当我们使用打包后的js文件,还是能成功运行起来。

image.png

我们还可以在package.json里面添加脚本命令,然后改写命令,之后就可以通过 yarn build 命令进行打包,打包之后,你可以再次启动http-server,查看效果,发现还是成功的。

image.png

通过以上的小案例,你就成功体验了一把webpack打包,不知道同学们有没有一种豁然开朗的感觉呢?

了解Webpack配置文件

我们刚刚提到了webpack是默认从index.js文件开始打包的,这点从官网上也可以看出来的。

image.png 但是我们很多时候需要自定义文件,比如我们的vue的入口就是main.js。

那我们如果把刚刚的index.js改成main.js,再去执行打包命令,就会发生错误。

image.png

那如果我们要像vue那样就是要自定义为main.js,该怎么做呢?

我们需要在src的同级目录添加一个webpack的配置文件 webpack.config.js, 然后在里面编写配置。

//webpack.config.js

module.exports={
    entry:'./src/main.js',     //打包前入口
    output:{                   //打包后出口
        filename:'bundle.js',  //打包后文件名
        path:'output'          //打包后路径
    }

}
复制代码

这里的我们 path:'output' 先尝试使用是相对路径,我们执行打包命令,命令行就会报错,path必须使用绝对路径。这里还有一点得注意就是entry:'./src/main.js',使用相对路径,它前面的./是不能省略的。

那怎么使用output的绝对路径呢?我们可以利用node的path模块

image.png

//webpack.config.js  output利用node的path模块使用绝对路径

const path =require('path')
module.exports={
    entry:'./src/main.js',     //打包前入口
    output:{                   //打包后出口
        filename:'bundle.js',  //打包后文件名
        path:path.join(__dirname,'output')          //打包后路径
    }

}
复制代码

我们再次执行打包文件,就会在src同级目录出现output文件夹,下面会有一个打包的bundle.js文件

image.png

了解Webpack工作模式

webpack有三种工作模式,你可以理解为它在不同环境的工作模式。

我们把webpack的出口路径还原为dist,执行打包命令,我们会发现有一行错误,这行错误,其实在一开始就已经出现了,细心的同学可能很早就已经发现了。

image.png

mode是webpack的环境配置参数,他一共有三种模式,默认就是production,production模式默认会做一些优化,比如压缩,但是压缩后的文件我们无法阅读。

//production模式

yarn  webpack 
复制代码

image.png

那接下来,我们来尝试传入参数node,使用开发模式development打包。

//development模式

yarn  webpack --mode development
复制代码

image.png

开发模式,webpack会优化我们打包的速度,添加一些调试过程当中需要的辅助。

image.png

除此之外,还有一个none模式,在none模式下,webpack就是运行最原始状态下的打包。

//none模式

yarn  webpack --mode none 
复制代码

image.png

除此之外,我们还可以在webpack的配置对象中添加参数,webpack就可以按我们设定的模式执行命令了。

image.png

//webpack.config.js 

const path =require('path')
module.exports={
    mode:'development',         //使用开发模式打包
    entry:'./src/main.js',     //打包前入口
    output:{                   //打包后出口
        filename:'bundle.js',  //打包后文件名
        path:path.join(__dirname,'dist')          //打包后路径
    }

}
复制代码

了解Webpack打包结果运行原理

为了更好地理解webpack的运行原理,我们使用none模式打包。 image.png

我们来看打包后的结果,并对打包的原理进行了解。

①定义一个对象,去缓存我们加载过后的模块

②定义一个require函数,用来加载模块

③在require上挂载了一些数据和工具函数

image.png

我们再次启动http-server,在地址栏输入localhost,打开控制台的source模块,找到入口,打个断点,刷新浏览器开始调试,理解Webpack打包结果运行原理。这里我就不过多赘述了,同学们可以自己慢慢调试体会。

image.png

image.png

结束

相信通过本文,你将对webpack有了一个初步的了解, 对于本文章,你有任何疑问,可在评论区留言。如果想进前端交流群(目前群里有40余人前端工程师,气氛活跃,欢迎大家加入),可以加我微信fangdongdong_25,请备注掘金哦。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改