Webpack5入门系列（一）

本文是webpack入门第一篇，介绍如何本地搭建打包工具

一、webpack是什么？

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模块组合成一个或个 bundles，它们均为静态资源，用于展示你的内容。总而言之，webpack就是一个打包工具。

二、为什么需要webpack来打包？

在原始时代，我们用jquery、html、css就可以写网站，不需要打包工具。但是，现在为了更好的开发体验，引入了vue、react等火热的前端开发框架，但是vue编写的vue文件或react编写的jsx文件浏览器是没有办法直接运行的，这就需要webpack来进行转换，需要指定loader去处理并转换成js代码。并且为了es6或css3等高级语法适配市场上各种浏览器，我们需要在打包的时候去转换或者添加兼容性代码。还有一些其他方面，通过webpack我们可以很快速的实现，大大的提高了开发效率。

三、怎么去搭建本地打包工具？

首先创建一个项目，安装webpack 和 webpack-cli

接着我们创建webpack配置文件，webpack.config.js

接着，我们在入口文件src/main.js文件中写一段js代码，来看一下打包效果

打开命令行，输入npx webpack，默认是build 可以看到成功输出到dist文件目录

但是我们在开发过程中不止有js文件，还有css或者图片等格式，其实webpack默认只能打包js代码，其他的格式文件都是通过loader来实现打包的

四、引入loader

我们先创建css文件，随便写点css代码

在入口文件main.js中引入css文件

有了css文件，怎么能没有html文件呢？ 在public文件夹下撞见index.html

好了，我们开始打包，每次都需要npx webpack，这也太麻烦了。 可以在package.json中配置打包命令

在命令行输入npm run build 就会执行webbpack build这条命令，webpack就会去读取当前package.json目录下的webpack.config.js配置，然后去执行build。当然，我们也可以在名中增加配置文件路径，如下

"build": "webpack build --config ./webpack.config.js",

好了，执行一下，看一下效果。 发现报错了，之前说过webpack默认只能识别js文件。css需要其他loader来识别。

css-loader style-loader

npm i -D css-loader style-loader

在modlue中配置匹配规则

 // 模块loader
  module: {
    rules: [
      {
        test: /css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },

首先我们来说一下为什么需要两个loader，并且是css-loader在后，style-loader在前。

这就要说到webpack的loader执行顺序了。webpack中的loader是从右往左执行的，也就是说先执行css-laoder，然后执行style-loader。其中css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。而style-loader的作用是生成style标签，然后生成往html中插入的js代码。

好了，我们打包看一下。

发现css代码已经变成字符串在js代码中了，我们加载在index.html中看一下。这里我们先手动引入dist目录下的main.js

在浏览器打开，发现正常。

sass-loader less-loader

但是我们在项目中已经很少编写css文件了，都是编写less或者是sass代码，那怎么把less或sass代码编译成css代码呢？

同样有对应的less-loader和sass-loader。

我们做个简单的示例

首先安装依赖

npm i -D less less-loader sass sass-loader

随便编写创建一个less文件和scss文件，然后在index.css文件中引入，如下

然后配置loader匹配规则

然后build一下看一下效果，完美解析less和scss文件

asset

在开发中，我们还需要引入图片和字体，这些在webpack统称为资源。

从图片开始吧，随便找几个图片放在static/image目录下，并在css中使用。

配置解析规则

打包看一下，图片完美显示

同理，引入字体图标。这里使用阿里iconfont

配置规则

 {
        test: /\.(ttf|woff|woff2)$/i,
        type: "asset/resource",
        generator: {
          filename: "static/[hash][ext][query]",
        },
 }

五、本地服务

资源处理完了，我们做一些本地开发优化。之前我们都是build之后才能看到效果，还需要手动引入，很不方便。我们希望可以在每次修改后，webpack自动打包，然后刷新。这里我们可以用webpack-dev-server

首先，安装依赖 npm i -D webpack-dev-server 开启本地服务模式

  // 本地服务
  devServer: {
    // 自动打开浏览器
    open: true,
    // 端口
    port: "3000",
    // 地址
    host: "127.0.0.1",
    // 热更新
    hot: true,
    // 静态目录
    static: {
      directory: path.resolve(__dirname, "./dist"),
    },
  },

在script脚本中增加脚本命令

"dev": "webpack serve --config ./webpack.config.js"

修改当前webpack环境

mode: "development" 然后把public目录下的index.html文件移动到dist目录下，别忘记修改里面引入js的路径。

跑一下本地开发模式 npm run dev

发现自动打开了浏览器，并且加载了index.html文件。

但是，每次都要我们手动的去移动html文件是不是太麻烦了呀。

html-webpack-plugin

首先安装依赖 npm i -D html-webpack-plugin 使用插件，webpack中插件是通过new调用的，如下

目前的配置只能自动迁移public下的html文件，但通常我们我们还有favicon图标，我们需要通过一下配置来迁移favicon文件

new HtmlWebpackPlugin({
      // 指定模板
      template: path.resolve(__dirname, "./public/index.html"),
      favicon: path.resolve(__dirname, "./public/favicon.ico"),
    })

但是如果有其他类型文件呢？ 那就要引入另外一个插件了

copy-webpack-plugin

首先安装npm i -D copy-webpack-plugin 配置插件

new HtmlWebpackPlugin({
      // 指定模板
      template: path.resolve(__dirname, "./public/index.html"),
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          // copy文件
          from: path.resolve(__dirname, "./public"),
          // copy到哪
          to: path.resolve(__dirname, "./dist"),
          globOptions: {
            // 忽略copy模板文件
            ignore: ["**/index.html"],
          },
        },
      ],
    }),

注意需要移除html-webpack-plugin中的favicon项，同时在copy-webpack-plugin中配置忽略模板文件。

我们来build一下，发现成功copy favicon文件。但发现dist有很多之前打包的文件，可不可以在每次打包完之前把dist目录清空呢？

当然是可以的，我们只需要在output中开启下面的配置即可

重新打包，发现帮我们清空了dist目录

除了open live插件启动服务之外，我们还可以通过serve模块启动

先安装一下npm i -g serve以dist文件夹启动服务serve dist

启动成功，点击地址，资源正常。

好了，本地搭建一个简单的打包工具就完成，下面一篇文章将继续优化配置。