跟着Blue学Webpack吧！！！（图文详解，原来Webpack如此简单）

💫💫💫哇咔咔！！好久不见（其实并没有，也就两天没写文），最近有点太忙了，毕竟考试周，按照Blue我平常上课的状态（睡觉、看闲书、yy），考试周对我来说就是折磨＞﹏＜，也是挺过了大多数考试，就剩下周最后一门了。好了，不巴拉巴拉了，今天要学Webpacck，本篇文章，是俺结合b站李立超老师，再加上我的动手（其实是失败次数过多（━┳━　━┳━）），总结的一篇文章。希望我的经验可以帮助宝子们。💫💫💫

本篇文章推荐人群：

计算机专业前端学习过html,css,javascript(我其实觉得你学完vue再来学习这篇文章会非常有帮助)
实习生前端方面
刚工作没多久的前端工程师

前言：

再一次感谢b站李立超老师无私分享知识，是一个非常好的宝藏up主，本篇文章结合李立超老师的视频（以下链接为b站视频链接）：http://【前端构建工具（webpack&vite）教程李立超】https://www.bilibili.com/video/BV1Kd4y147gg?p=10&vd_source=bb412cc25ca27e171f8e17085daad038

Webpack中文文档：概念 | webpack 中文文档 (docschina.org)

Webpack

1、什么是Webpack?

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

2、快速上手Webpack

第一步：初始化项目（终端执行）

npm init -y

当执行完这指令后，你会出现一个package.json文件

第二步：安装依赖`webpack`,`webpack-cil`（终端执行）

npm add -D webpack webpack-cil

-D：告诉虚拟机这个并不是程序运行一定需要的，只是一个在开发中的依赖

当执行完这个指令会出现如下东西，在package.json中会出现如图

第三步:在项目创建src目录，并编写代码（index.js）

解释：

index.js是程序打包的主入口，原因是在package.json中，我们设置了这样一个东西

编写代码：

第四步：打包

终端执行如下指令：(注意能执行它的前提是你的webpack-cil依赖装上了)

npm webpack

注意在使用这条命令的时候，你需要在package.json去添加如下东西

 "dev": "webpack --mode development",

  "build": "webpack --mode production"

打包好了我们会产生一个dist文件夹，下面会有main.js这个文件

第五步：继续创建两个文件m1.js，m2.js在src下然后写代码，打包

m1.js

export default {
  setH1() {
    document.body.insertAdjacentHTML("beforeEnd","<h1>你好</h1>")
  }
}

m2.js

export default {
  sayHello() {
    console.log("年后");
  }
}

在index.js里面去引入m1,m2

import m1 from "../src/m1";
import m2 from "../src/m2";
m1.setH1();
m2.sayHello();

打包

npm run build

打包后我们知道这个index.js是引入了m1.js与m2.js然后又被合成一个main.js，那这个main.js是否可以使用呢？我们在dist写入一个index.html，然后引入main.js

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script defer src="./main.js"></script>
</head>
<body>
</body>
</html>

运行：

发现可以运行，这也就证实了main.js是其他文件被打包成的一个总体文件了

`3、webpack.config.js`配置文件简介

创建webpack.config.js文件（直接新建文件名，然后命名为webpack.config.js）

注意：这个文件是在node.js环境下运行的，所以不能用前端模块规范使用export default而是使用module.exports={}

entry

介绍

入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

默认值是 ./src/index.js，但你可以通过在 webpack configuration 中配置 entry 属性，来指定一个（或多个）不同的入口起点。(以上文字出自webpack中文网)

打包一个文件

module.exports={
  mode: "production",//打包模式
  entry: "./Hello/hello.js",//用来指定打包时的主文件，默认是./src/index.js
}

打包两个文件

第一种写法：第一种数组写法是将多个文件打包成一个文件

module.exports={
  mode: "production",//打包模式
 entry:["./Hello/hello.js","./src/index.js"]
}

第二种写法：第二种对象写法却是将这两个文件打包成两个文件

 entry: {
    a: "./Hello/hello.js",
    b:"./src/index.js"
  }

注意：hello.js->a.js index.js->b.js

output

介绍

output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。(该描述来自webpack中文网)

当输入是单文件

module.exports={
  mode: "production",//打包模式
  entry: {
    a: "./Hello/hello.js"
  },
  output: {
    filename: "yuansheng.js",//打包后的类名叫什么
    clean: true,//打包的时候是否自动清除没用的打包(自动清理打包目录)
    path:""//指定打包的目录，一定是绝对目录
  }
}

当输入是多个文件

module.exports={
  mode: "production",//打包模式
  entry: {
    a: "./Hello/hello.js",
    b:"./src/index.js"
  },
  output: {
    filename: "[name].js",//打包后的类名叫什么
    clean: true,//打包的时候是否自动清除没用的打包(自动清理打包目录)
    path:""//指定打包的目录，一定是绝对目录
  }
}

loader

介绍loader

webpack只能加载js，不能加载html,css等文件，但这在开发的时候会不符合现实情况，所以这个时候就有了加载器 loader的作用了.

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。(该描述来自webpack中文网)

加载css文件

安装css加载器

npm install --save-dev css-loader

配置css加载器

打包，看效果

发现没有效果，为什么？这就是css加载器的单一职责，它只负责将css文件能弄成js文件，但是是否可以加载在页面，它不管，所以在这里我们需要去下载另外一个加载器style-loder

安装style加载器

npm install --save-dev style-loader

配置

module.exports={
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      }
    ],
  },
}

注意：记得加载loader是有顺序要求的在数组里面不要写反了

打包、看效果

加载图片

我们在src文件夹下创建一个assets文件夹，放入一张图片

在index.js文件中，导入这张图片

在index.js文件中，我们写上这句话

在配置中加入规则

module.exports={
  module: {
    rules: [
      {
        test: /\.jpg|png|gif$/,
        type:"asset/resource"//图片这种资源类型数据，指定type来处理
      }
    ],
  },
}

babel工具

介绍

在js编写的时候，有时需要使用js的新特性，但新特性在低版本的浏览器中，效果很差，为了兼容低版本的浏览器，同时又可以使用新特性，我们希望能够通过一些工具将新代码转成旧代码，babel就是这样的工具

使用

安装babel的loader

npm install -D babel-loader @babel/core @babel/preset-env webpack

配置

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
        },
      },
    },
  ];
}

在package.json中设置兼容列表

"browserslist":[
    "defaults"//默然选项
]

实际配置很多，这里就不说了，可以去github上面看官文

plugin

介绍

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

以html-webpack-plugin为例

html-webpack-plugin:根据你的Webpack构建配置，在构建时自动生成一个或多个HTML文件，并将打包生成的JavaScript和CSS文件自动引入到这些HTML文件中。

安装

//终端输入
npm install html-webpack-plugin -D

在webpack.config.js中去配置

引入插件：

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

配置

 plugins: [
    new HtmlWebpackPlugin({
      title:"年后",//html的title
      template: 'src/index.html', // 以src/index.html这个路径下的html文件为模板生成的 dist路径下的HTML文件
      filename: 'index.html', // 生成的 HTML 文件名称
      inject: 'body', // 将脚本注入到 body 元素底部
    }),
  ],

整体代码

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: "production",//打包模式
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader','css-loader']
      },
      {
        test: /\.jpg$$/,
        type:"asset/resource"//图片这种资源类型数据，指定type来处理
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      title:"年后",//html的title
      template: 'src/index.html', // 以src/index.html这个路径下的html文件为模板生成的 dist路径下的HTML文件
      filename: 'index.html', // 生成的 HTML 文件名称
      inject: 'body', // 将脚本注入到 body 元素底部
    }),
  ],
}

热更新

我们知道当我们每次改动代码的时候就会去执行npm run build这样很繁琐，如何让系统自动为我们去执行这个指令呢？提供两种方法

第一种：

在package.json中我们在scripts下面添加"watch":"webpack --watch"

{
  "name": "demo_01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "webpack",
    "build": "webpack",
    "watch":"webpack --watch"
  },
 ······························
  }
}

在终端执行

npm run watch

则可以实现实时更新

第二种：

安装依赖：

npm install -D webpack-dev-server

在package.json中我们在scripts下面添加"start": "webpack server"

{
  "name": "demo_01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "webpack",
    "build": "webpack",
    "watch": "webpack --watch",
    "start": "webpack server --open"
  }
  }

运行

npm run start

终端出现这个，我们利用这个链接，点进去就是我们刚才写的代码

结尾

这篇文章到这里就结尾了，希望俺的这些分享可以帮助到每一位宝子，也希望大家可以为我留下一个小小的关注。最近时间很挤，所以很难再找时间写文，我也不喜欢去水一些文章，还是希望自己写的质量都是自己满意的，可以呈现出一篇通俗易懂的文章给宝子们。如果有什么问题的话，宝子们留下自己评论在评论区，我会一一解答的，如果还有什么其他方面的问题，也可以私信我，我也会作答。感谢阅读🧡🧡🧡🧡🧡🧡🧡