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

站长

2023年10月04日 23:42 · 阅读数 115

`前言`

大家想要学习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

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

//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，鼠标点击地址，就会直接打开浏览器。

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

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

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

准备工作做完了之后，接来下进入我们的主题，我们使用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

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

//安装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 进行编译和打包的过程。

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

//使用webpack打包

yarn  webpack

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

sr/index.js  ===>  dist/main.js

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

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

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

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

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

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

`了解Webpack配置文件`

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

【webpack快速入门】如何手动给项目配置一个webpack打包工具？但是我们很多时候需要自定义文件，比如我们的vue的入口就是main.js。

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

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

那如果我们要像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模块

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

//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文件

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

`了解Webpack工作模式`

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

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

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

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

//production模式

yarn  webpack

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

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

//development模式

yarn  webpack --mode development

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

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

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

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

//none模式

yarn  webpack --mode none

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

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

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

//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模式打包。【webpack快速入门】如何手动给项目配置一个webpack打包工具？

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

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

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

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

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

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

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

`结束`

转载自:https://juejin.cn/post/7128641619766542367