一文带你了解webpack

已于 2023-10-25 18:55:59 修改
阅读量988 收藏 4
点赞数 1
分类专栏： webpack 文章标签： webpack 前端 node.js
于 2023-10-22 12:07:40 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zhang_wang_yun/article/details/133958735
版权

目录

1、webpack介绍和简单使用

1.1 什么是webpack？

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

1.2 安装webpack

1.全局安装：

cnpm install webpack -g
cnpm install webpack-cli -g

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

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

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

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

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

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改成数组写法，即可。

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即可，不要命名文件。

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

const path = require('path');

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

在这里插入图片描述
我们对之前的例子进行改造，添加一个css样式，然后打包。
在这里插入图片描述
引入样式
在这里插入图片描述
css
在这里插入图片描述

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样式是否生效：

<!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、下载

cnpm install html-webpack-plugin

在这里插入图片描述
2、引入

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

3、配置

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配置项。

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,改变默认输出文件名称。

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

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不允许注入哪些文件
注：前两条为什么这样设置，前文已经说过，若忘了，可往上翻阅文档。

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数组中添加两个配置。

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进行打包，看看效果：
在这里插入图片描述
没有打包字体图标

解决：

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

全代码：

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.引入插件

var MiniCssExtractPlugin = require("mini-css-extract-plugin");

3.修改loader

 {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },

4.使用插件：

plugins:[
  // 分离css
    new MiniCssExtractPlugin(),
]

8.2压缩css文件

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

var OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");

3、使用插件：

plugins:[
   // 压缩css
    new OptimizeCssAssetsWebpackPlugin()
]

打包后：多出一个index.css文件
在这里插入图片描述

东方青云、
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
webpack播放：了解webpack
02-05
Webpack 播放：了解 Webpack Webpack 是一个流行的 JavaScript 应用程序打包工具，它将各种资源（如 JavaScript、CSS、图片等）模块化并转换为浏览器可理解的格式。Webpack 的核心概念是“一切都是模块”，这使得它...
带你使用webpack快速构建web项目的方法
01-22
使用webpack构建web项目以及热部署插件的使用，按以下步骤，能帮助你快速构建和理解~ 详细学习还得靠官方文档！ 一，基础构建部分 大前提！你得先安装了Node.js此处不赘述。 1，创建一个文件夹 2，在当前文件夹子...
webpack详解
热门推荐
qq_43743402的博客
03-24 6万+
一、什么是webpack 1、官方解释：从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包） 下面来说一下模块和打包的概念！ 2、前端模块化： 前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发） ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发 并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并且将
史上最全webpack带你深入了解webpack
m0_62371650的博客
09-14 2192
史上最全webpack带你深入了解webpack
Webpack 究竟是什么？如何理解Webpack
MARTIAN的博客
02-24 1980
本篇文章主要是针对 B站Webpack从原理到实战 的知识梳理，之前写过一些 Webpack 更细节的一些知识，详情见 前端工程化（webpack），里面更详细的介绍了前端工程化、loader的使用，webpack的常用插件，Source Map等知识。 本文重点： 理解前端的模块化； 理解 Webpack 打包的核心思想； Webpack核心：loader 和 plugin，要分清楚什么情况下 loader，什么时候用 plugin，要有技术选型能力。 一、Webpack介绍 1.1 Webpack
Vue学习篇(十二)—webpack使用(一)
云澈的博客
07-21 489
At its core, webpack is a static module bundler for modern JavaScript applications. 从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。
谈谈你对webpack的理解
yiyueqinghui的博客
09-19 4715
1、webpack是什么 WebPack 是一个模块打包工具，可以使用WebPack管理模块，并分析模块间的依赖关系，最终编绎输出模块为HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。 对于不同类型的资源，webpack有对应的模块加载器loader，比如说， CSS 解析CSS的css-loader、style-loader， 解析less的less-loader，sass的sass-loader, JS 解析将 TypeScript 转换成 JavaScri
一篇文章带你浅入webpack的DLL优化打包
01-19
我们在使用第三方包的时候，一般内部的代码都不会变，但是当webpack打包的时候，还是回去处理第三方包。我们是否可以利用一些方法来改进呢？我们可以先对第三方包处理，然后再打包。 二、实战 1、初始化 npm init 2...
webpack-yard:了解Webpack技能
04-09
项目说明本项目提供了实现webpack整合webassembly开发的一种方式项目启动执行命令npm install本地开发 执行命令npm run dev 浏览器输入地址查看控制台发布模式 执行命令npm run build 和 npm run koa 浏览器输入地址...
微信小游戏合集 开发工具自带webpack
最新发布
03-01
微信小游戏 微信开发工具自带webpack， 这里webpack用于H5调试 愤怒的小鸟 贪吃蛇 飞机大战 坦克大战 消消乐 星图 大家来找茬
Webpack入门
越努力，越幸运！
04-05 1万+
Webpack 是什么webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。 简单说就是模块加载器，通过使用Webpack，能够像Node.js一样处理依赖关系，然后解析出模块之间的依赖，将代码打包。 其主要特性如下： 同时支持CommonJS和AMD模块（对于新项目，推荐直接使用CommonJS
webpack,了解一下
好好学习，天天向上
08-10 308
webpack webpack JavaScript 应用程序的静态模块打包器(static module bundler) 在处理应用程序时,会在内部创建一个依赖图 dependency graph 映射到项目需要的每个模块,将所有这些依赖生成到一个或多个 bundle 入口 entry 用来作为构建内部依赖图的开始 webpack.config.js e...
webpack的介绍（快速了解）
bxz0729的博客
10-11 251
1.什么是Webpack? 从本质上讲，Webpack是一个前端模块化打包工具 重点词：模块和打包 2.Webpack模块化的概念： 在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具使我们可以进行模块化开发 并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包 而Webpack其中的一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系 不仅仅是JavaScript文件，我们的CSS、...
webpack的基础使用
swallow_y的博客
09-02 6538
今天我准备总结的就是最近看的webpack4.17.1版本 一、为什么要用webpack 现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法 1.模块化，让我们可以把复杂的程序细化为小的文件; 2.类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实...
您对webpack真的了解吗？
梦里小白龙个人博客
06-12 277
一、什么是loader？ Loader用于对模块文件进行编译转换和加载处理，在module.rules数组中进行配置，它用于告诉Webpack在遇到哪些文件时使用哪些Loader去加载和转换。Loader还可以通过querystring或object指定选项参数。 1.常用的loader css-loader 允许将css文件通过require的方式引入，并返回css代码 less-loader...
了解 Webpack（ 简介 ）
AI-fisher的博客
01-20 964
文章目录一、webpack 是什么二、核心概念2.1 零配置2.2 配置文件2.3 Entry2.4 Output2.5 Mode2.6 Loader2.7 Plugins2.8 Chunk2.9 Bundle三、环境搭建四、配置及打包 一、webpack 是什么 webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打
webpack的个人理解（一）
weixin_33843947的博客
03-29 1035
一、构建工具的介绍关于构建工具，我用过的也就webpack,gulp稍微有些了解，但是没在项目中真正用到。以我的理解，构建工具能实现的功能：1. 代码转换： 从typescript->JavaScript，sass->css等；2. 代码优化： 压缩HTML、css代码等；3. 代码分割： 将通用的代码从多个文件中抽取出来；大文件切割成小文件；4. 模块合并： 模块化项目里会有很多模...
webpack的初步了解
jasonjkj的博客
01-29 251
webpack 的使用     参考案例:         https://www.jianshu.com/p/42e11515c10f     1.大致的了解:         1.案例代码:             先看一看再说.         2.再使用vue-cli的时候使用过的             模块化的开发             组件的的文件结构      
从前端模块化的概念来理解Webpack
吴孔云的博客
02-19 4217
为什么需要模块化？随着网站内容越来越复杂，浏览器和用户的交互越来越细腻，网站再也不是简单的内容呈现，更像是一个复杂的客户端软件，其中html/css/js代码越来越多，逻辑越来越复杂，越来越不便于管理，多人协作成本加深，为了解决这些问题，才出现了模块化的概念，也就是说模块化更多的是工程方面的产出，为了应对更复杂的网站开发。>在ES6之前，前端模块的实现本质都是利用JS神器：闭包。 闭包使得函数在调用
谈谈你对 webpack 的看法
07-28
webpack 是一个非常强大的模块打包工具，它主要用于将前端代码中的各种资源（例如 JavaScript、CSS、图片等）进行打包和优化，以便在浏览器中快速加载和运行。 我认为 webpack 的主要优势之一是它的模块化能力。通过使用 webpack，我们可以将前端代码拆分成多个模块，并使用 import 和 export 语法进行模块间的依赖管理。这样做不仅可以提高代码的可维护性，还可以实现按需加载，减少不必要的网络请求，提升页面加载速度。 另外，webpack 还提供了丰富的插件系统，可以通过插件来扩展和优化打包过程。例如，可以使用 UglifyJS 插件来压缩 JavaScript 代码，使用 MiniCssExtractPlugin 插件将 CSS 提取到单独的文件中，使用 HtmlWebpackPlugin 自动生成 HTML 文件等等。这些插件可以帮助我们更好地管理和优化前端资源。 此外，webpack 还支持各种预处理器和加载器，例如 Babel、Less、Sass 等，可以让我们在开发过程中使用最新的 JavaScript 语法和其他前端技术。 总的来说，webpack 是一个功能强大且灵活的工具，它可以帮助前端开发者更高效地组织和打包前端代码，提高项目的开发效率和性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东方青云、

你的鼓励将是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值