那些你面试必须知道的webpack知识点

东方青云、2023-10-22 12:52

目录

1、webpack介绍和简单使用

1.1 什么是webpack？

webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)。

1.2 安装webpack

1.全局安装：

js 复制代码 
cnpm install webpack -g
cnpm install webpack-cli -g

也可以通过npm进行全局安装，最好的是使用cnpm，因为cnpm 服务部署在国内阿里云服务器上 ， 可以提高包的下载速度 官方也提供了一个全局工具包 cnpm ，操作命令与 npm 大体相同。

我们可以通过 npm 来安装 cnpm 工具

html 复制代码 
npm install -g cnpm --registry=https://registry.npmmirror.com

安装webpack：cnpm install webpack -g


安装webpack脚手架：cnpm install webpack-cli -g

2、测试版本

我们来测试一下版本

1.3 简单使用一下webpack

说明一下：webpack本身之前是打包js的，如果要打包：html、css...需要借助一些东西。

1、进入项目目录，随便创建一个js文件

2、在该目录中下载webpack

html 复制代码 
cnpm install webpack -S

此时该目录下会多出两个文件

3、在终端执行：webpack进行打包

它告诉我们index必须在src目录下面。

我们改下文件目录

再次打包

此时目录种会多出一个dist文件夹

我们打开main.js看看发生了什么变化

原index.js文件：

打包后对代码进行了压缩。

2、webpack的入口与输出

2.1 入口(entry)

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

默认值是 ./src/index.js，但你可以通过在 webpack configuration中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：

webpack.config.js

js 复制代码 
module.exports = {
  entry: './path/to/my/entry/file.js',
};

我们对上面的例子进行改造，将index.js改为script，如果此时直接打包则会报错，因为默认入口是index.js所以我们要改一下入口文件。

在webpack.config.js文件中进行改变。

打包：

2.2 输出(output)

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

你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

webpack.config.js

js 复制代码 
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

我们对上面的例子进行改造，改变出口位置。

打包：

文件目录：

3、入口多种配置方法

3.1 多文件打包成一个文件

问题：多个入口文件==》单文件出口

解决：将entry改成数组写法，即可。

js 复制代码 
var path = require('path');
module.exports ={
    entry:['./src/script.js','./src/a.js','./src/b.js'],
    output:{
        path:path.resolve(__dirname, 'dist'),
        filename:'main.js',
    }
}


3.2 多文件打包成多文件

问题：多个入口文件==》多个文件出口

解决：将entry改成对象写法，key必须为文件名，值为文件路径，并且出口只写一个path即可，不要命名文件。

js 复制代码 
var path = require('path');
module.exports ={
    entry:{
        script:'./src/script.js',
        a:'./src/a.js',
        b:'./src/b.js'
    },
    output:{
        path:path.resolve(__dirname, 'dist'),
    }
}

4、loader的概念

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

简单来说：就是webpack默认只能打包js和json文件，如果想打包html、css、图片等等类型的文件...就需要用到对应的loader。

Warning：

webpack 的其中一个强大的特性就是能通过 import 导入任何类型的模块（例如 .css 文件），其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图。

在更高层面，在 webpack 的配置中，loader 有两个属性：

1、test 属性，识别出哪些文件会被转换。

2、use 属性，定义出在进行转换时，应该使用哪个 loader。

webpack.config.js

js 复制代码 
const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

我们对之前的例子进行改造，添加一个css样式，然后打包。

引入样式

css

js 复制代码 
var path = require("path");
module.exports = {
  entry: "./src/a.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/, //匹配任何以.css结尾的文件
        use: ["style-loader", "css-loader"],//打包css需要的loader
      },
    ],
  },
};

在打包前先安装这两个loader

进行打包：

打包后的main.js文件：

我们创建一个index.html文件引入打包后的main.js，看看js和css样式是否生效：

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>
</head>

<body>
<script src="./dist/main.js"></script>    
</body>
</html>

生效，说明打包没有问题。

题外话：

一般来说一个项目有特别多的loader，如果让我们一个一个下载，岂不是要疯了，所以一些框架，比如vue、react...等都是自动下载对应的loader，还有webpack的配置它也会自动生成，我们学习webpack主要是为了能够看到那些代码，并在项目需要时，更改一些配置。

不过大佬一般都能够自己配置webpack，哈哈哈哈。

5、压缩打包HTML

webpack默认只打包javascript文件和json文件，但是我们项目不可能只打包js文件，必然还要打包html文件。

想要打包html文件，那就必须用到一个插件html-webpack-plugin

5.1 使用步骤：

1、下载

js 复制代码 
cnpm install html-webpack-plugin

2、引入

js 复制代码 
var HtmlWebpackPlugin = require('html-webpack-plugin')

3、配置

js 复制代码 
var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin') //引入
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [new HtmlWebpackPlugin()],//添加配置
};

预格式化一下,方便阅读。

源文件：

你会发现打包后，title和div消失了，这是有问题的。

主要是需要对 plugins: [new HtmlWebpackPlugin()],添加template配置项。

js 复制代码 
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 指定模板页面
      template: "./src/index.html",
    }),
  ],
};

查重新打包后：

我们也可以添加新的配置项filename,改变默认输出文件名称。

js 复制代码 
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 指定模板页面
      template: "./src/index.html",
      // 改变默认输出文件名称
      filename: "hhh.html",
    }),
  ],
};

5.2 如何进行多页面打包？

创建多个new HtmlWebpackPlugin

js 复制代码 
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 指定模板页面
      template: "./src/index.html",
      // 改变默认输出文件名称
      filename: "index.html",
    }),
    new HtmlWebpackPlugin({
      // 指定模板页面
      template: "./src/hhh.html",
      // 改变默认输出文件名称
      filename: "hhh.html",
    }),
  ],
};

打包多个页面，必须设置filename配置项，配置项的值必须不同。

打包后：

5.3 如何多页面打包，并引入指定的js文件？

比如我们有这样一个需求：

有三个js文件，分别是index.js、jquery.js、hhh.js，

我需要让index.html压缩打包引入jquery.js、index.js，hhh.html压缩打包引入jquery.js、hhh.js。

此时我们就需要用到这两个配置项：
chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；

excludeChunks: 这个与chunks配置项正好相反，用来配置不允许注入的thunk。

1、改变entry入口配置

2、将output出口的filename删除

3、设置excludeChunks不允许注入哪些文件

注：前两条为什么这样设置，前文已经说过，若忘了，可往上翻阅文档。

js 复制代码 
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: {
    index: "./src/index.js",
    jquery: "./src/jquery.js",
    hhh: "./src/hhh.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 指定模板页面
      template: "./src/index.html",
      // 改变默认输出文件名称
      filename: "index.html",
      excludeChunks: ["hhh"], //不允许注入hhh.js文件
    }),
    new HtmlWebpackPlugin({
      // 指定模板页面
      template: "./src/hhh.html",
      // 改变默认输出文件名称
      filename: "hhh.html",
      excludeChunks: ["index"], //不允许注入index.js文件
    }),
  ],
};

打包后（已预格式化）方便阅读代码：

详细htm-webpack-plugin文档，可观看博客园的一个博主写的文章：
https://www.cnblogs.com/wonyun/p/6030090.html

6、HTML加入图片

在index.html文件中插入图片，如果不配置对应的图片loader，则无法将图片打包。

原文件：


进行打包：

图片没有被打包。

解决：

一、下载加载图片的loader >file-loader

二、下载让html支持图片的loader>html-withimg-loader

三、配置：在module对象中的rules数组中添加两个配置。

js 复制代码 
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: {
    index: "./src/index.js",
    jquery: "./src/jquery.js",
    hhh: "./src/hhh.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              esModule: false,
              outputPath: "img/", //让图片打包到img目录下，不配置该项默认是将图片和其他文件打包到同级
            },
          },
        ],
      },
      {
        test: /\.html$/,
        use: "html-withimg-loader",
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 指定模板页面
      template: "./src/index.html",
      // 改变默认输出文件名称
      filename: "index.html",
      excludeChunks: ["hhh"], //不允许注入hhh.js文件
    }),
    new HtmlWebpackPlugin({
      // 指定模板页面
      template: "./src/hhh.html",
      // 改变默认输出文件名称
      filename: "hhh.html",
      excludeChunks: ["index"], //不允许注入index.js文件
    }),
  ],
};

打包后：

7、HTML加入字体图标

在项目中必不可少的都要使用字体图标，对于字体图标，我们也要配置相对应的loader，不然无法打包字体图标。

我们在项目中添加字体图标：

css里放置，字体图标的样式，fonts放置字体图标文件

iconfont.css要改变一下引入路径：

如需打包，不能在index,html页面进行引入，需要在index,js文件中引入。

我们不配置对于loader进行打包，看看效果：

没有打包字体图标

解决：

js 复制代码 
 {
        test:/\.(ttf|woff|woff2)$/,
        use:'file-loader?name=./fonts/[name].[ext]'//打包到指定文件夹，name为统一iconfont,ext为每个文件自己的后缀名
      }

全代码：

js 复制代码 
var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: {
    index: "./src/index.js",
    jquery: "./src/jquery.js",
    hhh: "./src/hhh.js",
  },
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              esModule: false,
              outputPath: "img/", //让图片打包到img目录下，不配置该项默认是将图片和其他文件打包到同级
            },
          },
        ],
      },
      {
        test: /\.html$/,
        use: "html-withimg-loader",
      },
      {
        test:/\.(ttf|woff|woff2)$/,
        use:'file-loader?name=./fonts/[name].[ext]'//打包到指定文件夹，name为统一iconfont,ext为每个文件自己的后缀名
      }
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 指定模板页面
      template: "./src/index.html",
      // 改变默认输出文件名称
      filename: "index.html",
      excludeChunks: ["hhh"], //不允许注入hhh.js文件
    }),
    new HtmlWebpackPlugin({
      // 指定模板页面
      template: "./src/hhh.html",
      // 改变默认输出文件名称
      filename: "hhh.html",
      excludeChunks: ["index"], //不允许注入index.js文件
    }),
  ],
};

打包后：

8、单独分离css压缩打包

在之前我们的css都是更js打包在一起，但是我们想要它单独分离出来并进行压缩打包该怎么做呢？

8.1单独抽离css

1.下载插件：mini-css-extract-plugin

2.引入插件

js 复制代码 
var MiniCssExtractPlugin = require("mini-css-extract-plugin");

3.修改loader

javascript 复制代码 
 {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },

4.使用插件：

javascript 复制代码 
plugins:[
  // 分离css
    new MiniCssExtractPlugin(),
]

8.2压缩css文件

1.下载插件：optimize-css-assets-webpack-plugin

2.引入插件：

javascript 复制代码 
var OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

3、使用插件：

javascript 复制代码 
plugins:[
   // 压缩css
    new OptimizeCssAssetsWebpackPlugin()
]

打包后：多出一个index.css文件

相关推荐
树上有只程序猿12 分钟前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼1 小时前
【万字总结】前端全方位性能优化指南（十）——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下1 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox1 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致（火狐浏览器书签同步不一致）
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯（axios、ecahrts）版本二
前端·蓝桥杯
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04RAG 实践- Ollama+RagFlow 部署本地知识库05苍穹外卖面试总结06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程08DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具09如何本地部署AI智能体平台，带你手搓一个AI Agent10Android下HWC以及drm_hwcomposer普法(上)