Webpack 知识总结【Webpack】

刀刀小站
164 阅读7分钟

Webpack

基本概念

  1. 什么是 webpack

    webpack 是前端项目工程化的具体解决方案。

  2. webpack 的作用

    webpack 让前端开发变得更高效。

    • 代码压缩混淆

    • 处理浏览器端 JavaScript 的兼容性

    • 以模块化的方式处理项目中的资源

注意：目前绝大部分的 Vue/React 等前端项目，都是基于 webpack 进行工程化开发的。

使用前提

初始化

对根目录进行 npm 初始化

npm init -y

安装 webpack 包

安装 webpack 所需要的包

npm install webpack@5.58.2 webpack-cli@4.9.0 clean-webpack-plugin@4.0.0 webpack-dev-server@4.3.1 html-webpack-plugin@5.3.2 style-loader@3.3.0 css-loader@6.4.0 less-loader@10.1.0 less@4.1.2 url-loader@4.1.1 file-loader@6.2.0 babel-loader@8.2.2 @babel/core@7.15.8 @babel/plugin-proposal-decorators@7.15.8 jquery -D

创建基本文件目录

  • 在项目目录中，新建 src 源代码目录
  • 在项目目录中，新建 public 静态资源目录
  • src 目录中创建 index.js ，编写代码（引用了 jquery 。 
    import $ from 'jquery';

$(function () {
  $('li:odd').css('background-color', '#ccffcc');
  $('li:even').css('background-color', '#ffccff');
})
  • public 目录中创建 index.html ，引入 index.js 做完这一切之后，运行项目，发现报错。

报错.png

原因是不能在 module （即 ES6 规范之外）使用 import 语法，有兼容性的问题。在开发中，如何让程序员不用考虑兼容性使用高级语法、发布时让浏览器不出现兼容问题，是 webpack 的核心功能。

功能实现

打包处理 js

修改 package.json 文件中的 script 选项，添加一条命令：

"build":"webpack"

复习：

在 package.json 文件的 script 中输入的是命令行的简写方法，只要运行 npm run 简写 即可成功运行命令。

以上面的命令为例，想要运行 webpack 命令，只需要输入 npm run build 即可。

运行命令：

npm run build

根目录下就会生成一个 dist 文件夹，里面有一个 main.js ，这个文件就是 webpack 打包好的文件。

返回静态页面 index.html 中引入这个文件就能出现效果了。

配置文件与默认约定

  • 默认约定

    1. webpack 默认入口文件为 src 目录下的 index.js 文件，因此在前面打包的时候我们无需任何操作，webpack 会自动去找到文件进行打包。
    2. webpack 默认出口文件为 dist 目录下的 main.js 文件，因此在前面打包的时候我们无需任何操作，webpack 会自动去把打包好的文件输出到 main.js 中。

  • 配置文件

    webpack 有一个配置文件，文件名 固定 为 webpack.config.js ，在这个文件内可以编写 webpack 的设置。

自定义打包的入口与出口

  • 自定义入口 
    const path = require("path");

// 1 修改  项目的入口js文件 不想在使用 src/index.js
module.exports = {
  // 修改入口文件
  entry: path.join(__dirname, "src", "index.js")
}
    上述代码意思是让 webpack 去 src 下的 index.js 文件中读取代码打包（即让 index.js 作为入口文件。

    复习：

    nodejs 中内置模块 path.join 用于拼接路径， __dirname 用于获取当前文件的绝对路径。

  • 自定义出口 
    module.exports = {
        ...
  // 修改 出口
  output: {
    path: path.join(__dirname, "dist"),
    filename: "index.js"
  }
}

注意：

运行打包命令后会先寻找根目录下有没有 webpack.config.js。

  • 有 => 读取它，运行设置好的自定义入口文件和出口文件

  • 没有 => 沿用默认的入口文件和出口文件

修改打包模式

webpack 的 mode 用于设置打包的模式。

mode 节点的可选值有两个，分别是：

  1. development
    • 开发者模式
    • 打包速度快
    • 不会对打包的文件压缩和优化（打包体积大）
  2. production
    • 生产模式
    • 打包速度慢
    • 会对打包的文件压缩和优化（打包体积小）
module.exports = {
  // 修改打包模式
  // 开发 development 
  // 生产 production 
  mode: "development",
}

loader

概述

loader 加载器有什么用？

  • 在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。
  • 其他非 .js 后缀名结尾的模块， webpack 默认处理不了。
  • 需要调用 loader 加载器才可以正常打包非 js 文件，否则会报错！

所以，loader 加载器的作用是协助 webpack 打包处理特定的文件模块。比如：

  • css-loader 可以打包处理 .css 相关的文件。
  • less-loader 可以打包处理 .less 相关的文件。
  • babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法。

处理 css 样式

  1. 新建一个 index.css 文件 
    ul > li {
  font-size: 100px;
}
  2. 在 src 下的 index.js 文件中引入 css 文件 
    import "../css/index.css";
  3. 修改 webpack.config.js 文件
    • 把代码写在 module 对象下的 rules 数组内
    • 执行顺序从右往左读，先解析 css-loader 解析 css 文件，再解析· style-loader 把代码内嵌到 html 文件中。
      module: {
    rules: [
      // 识别  txt文件，交给  raw-loader
      // { test: /.txt$/, use: 'raw-loader' }
      // 处理css  style-loader css-loader 
      // css-loader 用来解析css文件
      // style-loader 负责把css代码 内嵌的方式 插入到 html文件中 
      // 顺序 右 -> 左 
      { test: /.css$/, use: ['style-loader', 'css-loader'] }
    ],
  },

处理 less 文件

用法同上

  1. 新建一个 less 文件 less/index.less

    ul {
  li {
    color: red;
  }
}

  2. 在 src/index.js 来引入 该文件

    import "../less/index.less";

  3. 修改 webpack.config.js

      module: {
    rules: [
      // 处理css  style-loader css-loader 
      { test: /.css$/, use: ['style-loader', 'css-loader'] },
      // 识别less
      { test: /.less$/, use: ['style-loader', 'css-loader', "less-loader"] },
    ],
  },

  4. 重启 命令

处理高级的 js语法

  1. 在 src/index.js 编写了高级的语法

    // js装饰器
function info(target) {
  target.abc = '哈哈哈哈哈哈哈，这是新语法';
}

// 下面的语法，表示给Person加了一个abc属性
@info
class Person { }

console.log(Person.abc);

  2. 修改 配置 webpack.config.js

      module: {
    rules: [
      { test: /.css$/, use: ['style-loader', 'css-loader'] },
      { test: /.less$/, use: ['style-loader', 'css-loader', "less-loader"] },
        // 使用babel 来处理 高级的js语法
      { test: /.js$/, use: 'babel-loader', exclude: /node_modules/ }
    ],
  },

  3. 在根目录下 新建 关于 babel 配置文件 babel.config.js

    module.exports = {
  // 声明 babel 可用的插件
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}

图片处理

webpack 分有 4 和 5 版本

我们现在用得新 5的版本

新5版本中 关于 处理 图片问题 两种解决方案

  1. 继续使用 4 版本 推荐 url-loader （在把图片修改为内嵌式导入时出现了问题）

  2. 直接使用 5 版本 内置 assets module 步骤：

  3. 移除以前 url-loader 相关代码 **webpack.config.js **

    // { test: /.(jpg|png|gif)$/, use: 'url-loader?limit=6055&outputPath=images' },

    { test: /.(jpg|png|gif)$/, type: 'asset/resource' },

base 64

本质

一种文件格式，但是是一串很长的字符串，图片标签加载这段字符串也能显示本来的图片模样。

优点

把较小的图片通过工具转为 base64 字符串的形式，直接在页面中写这个地址，减少 http 请求，优化性能。

插件效果

清除打包后无关的文件

clean-webpack-plugin

每次打包构建的时候，自动清理 dist 目录下的旧文件，保证 dist 目录的代码是最新的。

前置条件：需要安装依赖包：clean-webpack-plugin@4.0.0。

使用时需要用 new 进行实例化。

// 1. 配置自动清理插件（在打包的时候，插件就会自动清理 dist 中没用的文件）
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const cleanPlugin = new CleanWebpackPlugin();

module.exports = {
  mode: 'development',
  // 插件配置
  plugins: [ cleanPlugin ]
}

自动根据代码修改打包

webpack-dev-server

每次 js 里的代码内容发生改变，都会自动进行编译打包，插入到 html 静态页面中。（仅适合开发模式中使用）

前置条件：需要安装包 webpack-dev-server@4.3.1。

使用：

  1. 先在 package.json 文件 script 中添加新的简写命令： 
    "scripts": {
  "dev": "webpack serve" // 注意这里是 serve ，不是 server
},
  2. 在 webpack.config.js 配置文件中，增加 devServer 节点对该插件进行更多的配置：
    • 参数1：端口号
    • 参数2：是否自动打开一个新页面
    devServer: {
  port: 9000, // 实时打包所用的端口号
  open: true // 初次打包完成后，自动打开浏览器
}

完成这一切后再运行 npm run dev 命令即可生效。

打包生成的文件哪儿去了？

  • 在不配置 webpack-dev-server 的情况下， webpack 打包生成的文件，会存放到实际的物理磁盘上
    1. 严格遵守开发者在 webpack.config.js 中指定配置
    2. 根据 output 节点指定路径进行存放
  • 在配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中
    1. 不再根据 output 节点指定的路径，存放到实际的物理磁盘上，默认为 bundle.js
    2. 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

注意：

凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服务器，否则最新的配置文件无法生效！

发生改动自动刷新页面

html-webpack-plugin

可以自动把生成好的 bundle.js 注入到 HTML 页面中。

前置条件：需要安装包 html-webpack-plugin@5.3.2。

使用：在 webpack.config.js 中配置 html-webpack-plugin，需要先引入包，new 一个实例对象，该对象有两个参数，第一个是告诉它 html 文件在哪，它会自动寻找 bundle.js 文件，因此不用设置第二个参数。

注意：

第一个参数必填，不填就会报错。

const HtmlPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlPlugin({
  template: path.join(__dirname, 'public', 'index.html'), // public中，你的html叫什么

module.exports = {
  mode: 'development',
  // 插件配置
  plugins: [ cleanPlugin, htmlPlugin ]
}
avatar
文章
阅读
粉丝