阅读 2033

[ 干货篇 · 第四期] 让webpack5再飞一会儿,夯实webpack4吧(基础篇)

海阔凭鱼跃,天高任鸟飞。Hey 你好!我是秦爱德。😄

导读

我是秦爱德,一名web前端划水员。提起webpack基本上是面试必问,工作必用的技术。多年来,随着技术的不断发展与变更,前端越来越注重模块化、组件化、工程化。这也迫使了webpack正在变得越来越重要!

我本身是学java出身的,毕业后机缘巧合的去做了平面设计,然后因与专业不对口又做了一名javaer,接着又辞职不干了,跑去干了销售。哈哈,职业道路还真是起起落落落落落落落落落落落落...🌚🌚🌚

销售之后,我便自学前端,一头扎进了前端的浪潮。🌝经历了前端从刀工火种到现在百花齐放的各个阶段,接触到了很多前端开发技术。其中自动化构建这一块就显得尤为突出。可以说正是因为有了这一系列的构建工具的诞生,才使得前端开发从 “简陋期” 平滑的过渡到了 “现代期” 。

我见过不少师兄师弟仅仅只把webpack作为一个打包工具来使用,从而忽视了它其它的一些强大的功能。webpack绝对不仅仅只是一个打包工具,而可以围绕着webpack制定出一套前端工程化开发的解决方案。从而解决从开发环境到生产环境的性能优化,提高多人协同开发的效率,统一代码风格,提升代码维护性等。

好啦,说了这么多,还请各位看官别嫌我啰嗦,咱们这就开始上干货🔥🔥🔥

跳起来

webpack是什么?

webpack是一种前端资源构建工具,一个静态模块打包器。在webpack看来,前端的所有资源文件都会作为模块处理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源。

webpack与gulp的区别是什么?

webpack与gulp最大的区别就是在于打包过程上有所不同

Grunt、Gulp 这类构建工具的打包过程是通过遍历源文件-->匹配规则-->打包,整个过程是基于文件流的打包方式且做不到按需加载。

webpack 是从入口文件开始,把相关模块引入通过加载模块-->解析模块-->打包,整个过程是基于模块化的打包方式且支持按需加载,同时还可以在执行过程中针对性的去做一些优化操作。

webpack的五个核心概念

1. 入口(Entry):

入口(Entry)表示webpack以哪个文件为入口起点开始打包,构建内部依赖

2. 输出(Output):

输出(Output)表示webpack打包后的资源bundles输出到哪儿去,以及如何命名

3. 加载器(Loader):

Loader让webpack能够去处理那些非JavaScript文件的资源(webpack自身只理解JavaScript)

4. 插件(Plugins):

插件(Plugins)可以用于执行范围更广的任务,插件的范围包括,从打包优化和压缩一直到重新定义环境中的变量等。

5. 模式(Mode):

模式(Mode)表示webpack使用相应模式的配置

webpack开发环境搭建!

1.安装nodejs

webpack 是基于 Node.js 的打包工具

首先我们去到nodejs官网,下载nodejs 传送门🚀🚀🚀

2.初始化一个webpack项目

1. 初始化项目

npm init
复制代码

2. 安装webpack

全局安装:通过 webpack 运行

项目维度安装:通过 npx webpack 运行

这里推荐以项目维度安装,可根据不同项目的实际业务场景采用不同的webpack版本进行打包配置

npm i webpack webpack-cli -D
复制代码

本篇文章webpack版本号^4.41.6, webpack-cli版本号^3.3.11

基本使用

1. 创建基本目录

  • 在根目录下新建一个src文件夹,里面新建一个index.js(入口文件)
  • 在根目录下新建一个dist文件夹,里面新建一个index.html

分别在文件中写下一些测试代码

// index.js
function init(){
  console.log('hello webpack');
}
init();
复制代码
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack</title>
</head>
<body>
  <script src="main.js"></script>
</body>
</html>
复制代码

现在我们来执行npx webpack打包命令

运行完毕后在dist文件夹下面便会多一个main.js,同时打开index.html文件,会看到控制台打印出了 “hello webpack” 字样。

可以看到,当我们在没有写任何配置的时候,webpack依然可以打包成功,不过这个时候是走的webpack会提供一套默认配置,多数情况下,这是远远不够的,我们还需要自定义配置文件,来满足我们不同的需求场景。

自定义配置文件

我们再项目根目录上新建一个webpack.config.js文件,并写下一些基本配置

前文提到,webpack至少包含了5个核心配置,所以,我们只需要按照这5个核心配置来依次填鸭即可

webpack.config.js介绍

webpack.config.js是webpack的配置文件

通过设置配置文件,表示你需要让webpack做什么事情(当运行webpack指令时,会加载里面的配置)

所有的构建工具都是基于nodejs平台运行的,模块化默认采用commonjs

最基本的配置

// resolve用来拼接绝对路径的方法
const { resolve } = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: resolve(__dirname, 'dist')
   },
  /* 
    development:开发环境
    production:生产环境
  */
  // 模式的配置
  mode: 'development',
}
复制代码

现在我们再次使用npx webpack来重新构建,打包完成之后,会看到效果是一样的,至此,我们便完成了一份最基本的webpack.config.js配置

使用npm命令

以上我们使用的npx是基于本地webpack来运行的,我们还可以设置一个快捷方式,在package.json中添加一个npm脚本如:

npm run build
复制代码

配置也很简单,只需要在package.json文件的scripts中新加了一个配置"build: "webpack"即可

常用的资源管理loader

前文提到webpack自身只理解JavaScript,那么像css、图片、字体等资源应该如何处理呢?

重点来了,webpack可以通过loader去处理那些非JavaScript文件的资源

loader相关的配置我们需要写在module里面如:

module: {
  rules: [
  // 这里面是详细的loader配置
  ]
}
复制代码

处理css资源

我们在src目录下面新建一个index.css文件,并随便写点测试代码

html,body{
  background-color: #f5f5f5;
}
复制代码

并在入口文件将样式文件引入

// index.js
import '../css/index.css';
复制代码

加载css我们需要引入style-loader和css-loader

npm i -D style-loader css-loader
复制代码

module.rules中写下对应的配置

{
  // 匹配哪些文件
  test: /\.css$/,
  // 使用哪些loader来进行处理
  use: ["style-loader", "css-loader"],
},
复制代码

配置完毕,此时我们可以重新打包

npm run build
复制代码

打包完成后打开页面,发现背景色已经变化,证明css加载成功。

处理图片资源

我们在index.css文件下面随便你写点测试代码

.box1{
  width: 100px;
  height: 100px;
  background: url('../images/掘金首图.jpg') no-repeat;
  background-size: 100% 100%;
}
复制代码

在dist/index.html里面写上一个空的div

<div class="box1"></div>
复制代码

加载图片我们需要引入url-loader

$ npm i -D url-loader
复制代码

module.rules中写下对应的配置

{
  test: /\.(jpg|png|gif)$/,
  loader: 'url-loader',
},
复制代码

重新打包,便可以看到页面上有图片呈现了。

图片

细心的朋友会发现图片这时候被重命名了

打包后的文件是会以hash值来重命名,这时候我们可以在url-loader的其它参数上进行配置如:

{
  test: /\.(jpg|png|gif)$/,
  loader: 'url-loader',
  options: {
    // 图片大小小于8kb,就会被处理成为base64
    // 优点:减少请求数量,减轻服务器压力
    // 缺点:图片体积会更大,文件请求速度会更慢
    limit: 8 * 1024,
    // 控制命名字符长度
    name:'[hash:10].[ext]',
  },
},
复制代码

处理字体图标资源

相信来到这一步,小伙伴们可能已经稍微摸透了webpack配置loader的套路了吧

其实就是需要啥资源,我们就下载不同的资源包,并且按照对应的npm地址,学习包的配置使用而已

那么对于字体图标资源应该如何配置呢?这个相对步骤要繁琐一点,咱们一点一点来

咱们先在src下面新建一个media文件夹用来存放字体图标资源,然后再去阿里巴巴图标图下载字体传送门🚀🚀🚀

下载好的字体包解压之后如下

图片

我们将相关字体复制到项目中去

iconfont.css复制到项目中,并在入口文件引入

index.html写下span标签,并带上对应的图标类名

接着就剩最后一步了,写入webpack配置

这时候我们需要引入file-loader

$ npm i -D file-loader
复制代码

写入配置

{
  // exclude排除资源
  exclude: /\.(css|js|html|less|json|jpg|png|gif)$/,
  loader: 'file-loader',
  options: {
    name:'[hash:10].[ext]'
  },
},
复制代码

再次运行,页面上如愿以偿的出现了图标

图片

输出单页

如上配置我们需要在dist文件中手动创建一个index.html文件,然后将输出的main.js手动引入。非常麻烦,并且真实开发中,我们也不可能这样去控制。所以,index.html也是通过配置自动生成哒。

这里我们需要引入一个插件html-webpack-plugin

npm i -D html-webpack-plugin
复制代码

调整配置文件代码

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: {
    ...
  },
  output: {
    ...
  },
  module:{
    ...
  },
  plugins: [
    // plugins的详细配置
    new HtmlWebpackPlugin({
      // 等于说就是复制这个./src/index.html,并自动引入打包输出的所有资源
      template: './src/index.html'
    }),
  ],
  mode: 'development',
}
复制代码

删除dist,重新打包,会发现dist里面多了一个index.html文件,并且自动帮我们引入了main.js

清理dist文件夹

我们在每次打包后, 生成的dist文件夹不会清理掉历史遗留下来的文件,造成最终的打包文件“不干净”

所以我们可以在每次打包的时候都去清理一遍dist,这里需要引入一个插件clean-webpack-plugin

npm i -D clean-webpack-plugin
复制代码

写入配置

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
...
plugins:[
new CleanWebpackPlugin({
  cleanAfterEveryBuildPatterns: ["dist"],
}),
]
...
复制代码

写在后面

好啦,这就是关于webpack的基础篇介绍,本文只是大概讲了一下webpack的基础配置,如果本篇文章能够上热门,我将贡献出我的肝尽快推出姊妹篇让webpack5再飞一会儿,夯实webpack4吧(优化篇),届时将会着重介绍webpack的一些优化点如:提取js中的css成单独文件、代码压缩、图片压缩、配置eslint代码风格检查、js,css代码兼容性处理等。

撒花、撒花 🌸🌸🌸🌸🌸🌸🌸🌸

点赞👍再看,已成习惯!该系列持续更新,你们的一键三连就是我持续写作的最大动力,如果对本篇博客有任何意见和建议,欢迎师兄们留言!欢迎来扰!😜😝

我是秦爱德,一个在互联网夹缝求生的程序员!