webpack高级

已于 2022-07-09 16:00:28 修改
阅读量213 收藏
点赞数
文章标签： webpack 前端 javascript
于 2022-07-09 13:46:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46222031/article/details/125683253
版权

提升开发体验

sourceMap

  • 开发模式：cheap-module-source-map

    • 优点：打包编译速度快，只包含行映射
    • 缺点：没有列映射
module.exports = {
  // 其他省略
  mode: "development",
  devtool: "cheap-module-source-map",
};
  • 生产模式：source-map
    • 优点：包含行/列映射
    • 缺点：打包编译速度更
module.exports = {
  // 其他省略
  mode: "production",
  devtool: "source-map",
};

提升打包构建速度

HotModuleReplacement（HMR/热模块替换）：

在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。

css使用

module.exports = {
  // 其他省略
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
    hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）
  },
};

js使用

// main.js
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);

// 判断是否支持HMR功能
if (module.hot) {
//回调是指特殊处理
  module.hot.accept("./js/count.js", function (count) {
    const result1 = count(2, 1);
    console.log(result1);
  });

  module.hot.accept("./js/sum.js", function (sum) {
    const result2 = sum(1, 2, 3, 4);
    console.log(result2);
  });
}

实际上

在babel的options中使用plugins引入这两个插件

使用封装好的loader：vue-loaderopen in new window, react-hot-loaderopen in new window

ONE OF 

在oneOf其中的loader命中了一个就不再看其他的

rules: [
      {
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组里面 Loader 执行顺序是从右到左
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"],
          },
          {
            test: /\.s[ac]ss$/,
            use: ["style-loader", "css-loader", "sass-loader"],
          },
          {
            test: /\.styl$/,
            use: ["style-loader", "css-loader", "stylus-loader"],
          },
          {
            test: /\.(png|jpe?g|gif|webp)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
              },
            },
            generator: {
              // 将图片文件输出到 static/imgs 目录中
              // 将图片文件命名 [hash:8][ext][query]
              // [hash:8]: hash值取8位
              // [ext]: 使用之前的文件扩展名
              // [query]: 添加之前的query参数
              filename: "static/imgs/[hash:8][ext][query]",
            },
          },
          {
            test: /\.(ttf|woff2?)$/,
            type: "asset/resource",
            generator: {
              filename: "static/media/[hash:8][ext][query]",
            },
          },
          {
            test: /\.js$/,
            exclude: /node_modules/, // 排除node_modules代码不编译
            loader: "babel-loader",
          },
        ],
      },
    ],

Cache缓存

每次打包时 js 文件都要经过 Eslint 检查 和 Babel 编译，速度比较慢。

我们可以缓存之前的 Eslint 检查 和 Babel 编译结果，这样第二次打包时速度就会更快了。

loader 

 在options添加

 options: {
              cacheDirectory: true, // 开启babel编译缓存
              cacheCompression: false, // 缓存文件不要压缩
            }

配置项

plugins

添加（cache和cacheLocation）

new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    }),

rules: [
      {
        oneOf: [
          {
            // 用来匹配 .css 结尾的文件
            test: /\.css$/,
            // use 数组里面 Loader 执行顺序是从右到左
            use: ["style-loader", "css-loader"],
          },
          {
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"],
          },
          {
            test: /\.s[ac]ss$/,
            use: ["style-loader", "css-loader", "sass-loader"],
          },
          {
            test: /\.styl$/,
            use: ["style-loader", "css-loader", "stylus-loader"],
          },
          {
            test: /\.(png|jpe?g|gif|webp)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
              },
            },
            generator: {
              // 将图片文件输出到 static/imgs 目录中
              // 将图片文件命名 [hash:8][ext][query]
              // [hash:8]: hash值取8位
              // [ext]: 使用之前的文件扩展名
              // [query]: 添加之前的query参数
              filename: "static/imgs/[hash:8][ext][query]",
            },
          },
          {
            test: /\.(ttf|woff2?)$/,
            type: "asset/resource",
            generator: {
              filename: "static/media/[hash:8][ext][query]",
            },
          },
          {
            test: /\.js$/,
            // exclude: /node_modules/, // 排除node_modules代码不编译
            include: path.resolve(__dirname, "../src"), // 也可以用包含
            loader: "babel-loader",
            options: {
              cacheDirectory: true, // 开启babel编译缓存
              cacheCompression: false, // 缓存文件不要压缩
            },
          },
        ],
      },
    ],
 plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
    }),
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],

Thead（多线程）

而对 js 文件处理主要就是 eslint 、babel、Terser 三个工具，所以我们要提升它们的运行速度。

我们可以开启多进程同时处理 js 文件，这样速度就比之前的单进程打包更快了

  1. 如何获取 CPU 的核数，因为每个电脑都不一样。
// nodejs核心模块，直接使用
const os = require("os");
// cpu核数
const threads = os.cpus().length;
  1. 下载包
npm i thread-loader -D

3、使用

loader：中添加  loader："thread-loader“

plugins：添加threads属性

const TerserPlugin = require("terser-webpack-plugin");

// cpu核数
const threads = os.cpus().length;

//loader
 {
            test: /\.js$/,
            // exclude: /node_modules/, // 排除node_modules代码不编译
            include: path.resolve(__dirname, "../src"), // 也可以用包含
            use: [
              {
                loader: "thread-loader", // 开启多进程
                options: {
                  workers: threads, // 数量
                },
              },
              {
                loader: "babel-loader",
                options: {
                  cacheDirectory: true, // 开启babel编译缓存
                },
              },
            ],
          },
//plugins
 plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "../src"),
      exclude: "node_modules", // 默认值
      cache: true, // 开启缓存
      // 缓存目录
      cacheLocation: path.resolve(
        __dirname,
        "../node_modules/.cache/.eslintcache"
      ),
      threads, // 开启多进程
    }),

减少代码体积

tree  Shaking

减少体积，移除无用

默认开启无需配置

Babel

Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！

Babel 对一些公共方法使用了非常小的辅助代码，比如 _extend。默认情况下会被添加到每一个需要它的文件中。

你可以将这些辅助代码作为一个独立模块，来避免重复引入。

@babel/plugin-transform-runtime: 禁用了 Babel 自动对每个文件的 runtime 注入，而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引

Image Minimizer

压缩图片

优化代码运行性能

Code Split

打包代码时会将所有 js 文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的 js 文件，其他文件不应该加载。

所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。

代码分割（Code Split）主要做了两件事：

  1. 分割文件：将打包生成的文件进行分割，生成多个 js 文件。
  2. 按需加载：需要哪个文件就加载哪个文件

文件命名

  filename: "static/js/[name].js", // 入口文件打包输出资源命名方式
  chunkFilename: "static/js/[name].chunk.js", // 动态导入输出资源命名方式
  assetModuleFilename: "static/media/[name].[hash][ext]", // 图片、字体等资源命名方式（注意用hash）

Preload（优先级高），Prefetch（空闲加载）

我们想在浏览器空闲时间，加载后续需要使用的资源。我们就需要用上 Preload 或 Prefetch 技术。

Corejs

解决兼容性问题（es6）

PWA

开发 Web App 项目，项目一旦处于网络离线情况，就没法访问了。

我们希望给项目提供离线体验

江江春
关注
webpack高级配置
gogo2027的博客
11-02 167
举个例子首先 webpack.config.js配置/**在固定 a.js 用esm导出，b.js用commonjs导出不变动};};webpack的本质是把多个js模块合并到一个js中，即一个入口得到一个输出js文件（bundle.js）。但是导致的问题是，如果这个bundle.js文件很大，那么浏览器请求的时候，导致请求时间很长，首屏长时间白屏。所以优化手段就是把bundle.js文件拆分成多个小的js文件，同时请求，首屏当然就更快渲染显示。
WebPack的高级使用
12-05
WebPack的中级使用，博客地址：http://blog.csdn.net/pcaxb/article/details/53466261
webpack高级篇
接着奏乐接着舞的博客
06-01 2763
高级篇主要讲述：1.提升开发体验 2.提升 webpack 提升打包构建速度 3.减少代码体积 4.优化代码运行性能 这部分的知识很重要，是前端性能优化的重要组成部分，也是面试的高频考点。 注：webpack几乎所有的配置流程都一样，既：去官网（中文翻译网站经常有错误！）先下载包，然后去config里面配置就完事，本文对此稍作演示，其他请自行查阅配置。
webpack高阶用法
weixin_42590838的博客
03-22 270
webpack与grunt、gulp的不同？ 与webpack类似的工具还有哪些？谈谈你为什么最终选择（或放弃）使用webpack？ 有哪些常见的Loader？他们是解决什么问题的？ 有哪些常见的Plugin？他们是解决什么问题的？ Loader和Plugin的不同？ webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全 是否写过Loader和Plugin？描述一下编写loader...
26-webpack不简单-为你揭秘webpack的高级技巧
MichaelAn的博客
02-13 148
26-webpack不简单-为你揭秘webpack的高级技巧 26课时与7课时基本重复，所以简单记录不同点。 Webpack 不同等级的使用者： 初级：可以通过CLI搭建基本的webpack并打包项目 中级：可以更改一部分配置文件(loader plugin) 高级：使用webpack解决项目的问题 环境和目录 开...
值得了解的webpack高级技能
weixin_34261415的博客
05-07 160
在只要这几步，webpack速成不是事儿一文中, 笔者简单介绍了webpack的常见用法。能满足最基本的开发需求。在这篇文章中，再来谈谈一些较高级的应用。 1. 配置不同环境的构建脚本 之前构建都是通过 npx webpack ... 这样的方式执行构建命令。可能你会觉得这样的方式不够高效。甚至在某些特定的情况下还需要设置 Node 的环境变量。根据环境变量值的不同，设置构建 --mode 的不同...
webpack高级配置与优化详解
10-15
本文将从webpack的高级配置与优化入手，详细解释webpack打包多页面的技巧以及如何处理跨域问题。 ### webpack打包多页面 在多页面应用（MPA）中，通常会根据不同的页面加载不同的JavaScript资源。webpack提供了...
Webpack：Webpack高级主题：懒加载.docx
08-28
Webpack：Webpack高级主题：懒加载.docx
Webpack：Webpack高级主题：代码分割.docx
08-28
Webpack：Webpack高级主题：代码分割.docx
Webpack：Webpack高级主题：热模块替换.docx
08-28
Webpack：Webpack高级主题：热模块替换.docx
Webpack 技巧
徐行之的博客
12-20 156
1. 使用npmscript 运行webpack命令：在一个webpack项目中执行npm install后，会拉取package.json中定义的npm模块并将涉及的命令模块在node_modules/.bin创建软链接，执行package.json定义的script命令，会默认在node_modules/.bin中查找对应的模块并执行。 这个技巧主要可用于简写项目启动、构建、测试命令。 例如在package.json新增以下script代码，然后执行npm run build，可以构建项目。 {
高级篇：webpack应用指南一
cd_yang2017的博客
02-03 327
webpack5应用教程高级篇（一）
Webpack高级学习：优化代码运行性能-Network Cache
weixin_47295886的博客
03-27 316
但是 main.js 文件的 hash 值也发生了变化，这会导致 main.js 的缓存失效。当我们修改 math.js 文件再重新打包的时候，因为 contenthash 原因，math.js 文件 hash 值发生了变化（这是正常的）。runtime 文件只保存文件的 hash 值和它们与文件依赖关系，整个文件体积就比较小，所以变化重新请求的代价也小。更新后：math.yyy.js, main.js 引用的 math.yyy.js, 文件名发生了变化，间接导致 main.js 也发生了变化。
React框架之路由
m0_64599482的博客
07-04 191
1 React路由可以有效的管理多个视图(组件)实现SPA2 Router组件包裹整个应用，只需要使用一次3 Link组件是入口，Route组件是出口4 通过props.history实现编程式导航5 默认模糊匹配，添加exact变精确匹配6 React路由的一切都是组件，可以像思考组件一样思考路由。
史上最详细的webpack 讲解2 （DefinePlugin中的淫技巧）
weixin_33828101的博客
04-11 323
今天我突然发现我的掘金原创排行已经落到了120位，这是什么原因，因为我分享的不够多，还是我分享的不够好，看的人不多，又好几天没和大家几面了，来吧！死也死在分享上面，怎么说呢，今天讲解的东西也不是很深奥的东西，以前一直没有用到这东西，今天好好看了这东西，可以带来很大的方便，我就给大家举两个例子玩玩 我什么都不要我只要 赞 今天我就不详细的列出创建目录结构了，看过我webpack 讲解1 -- 讲解的...
webpack入门和实战(一)--webpack配置及技巧
热门推荐
solar_Lan的博客
09-18 5万+
一、全面理解webpack 1、什么是 webpack？        webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,它能有Grunt或Gulp所有基本功能。webpack的官网是 https://webpack.github.io/ ，文档地址是https://webpack...
【专项学习】 —— Webpack5从入门到精通课程学习（四）
柳柳66的博客
03-07 250
这篇主要介绍《webpack优化环境配置》。 知识点包括： 开发环境性能优化(HMR) source-map oneOf 一、开发环境性能优化(HMR) 1、将webpack生产环境配置汇总工程完整复制一份，并重命名。 在终端输入npx webpack serve启动热更新服务。 然后我们简单修改index.less内的样式，会发现只单独更新了样式模块。 2、此时在简单修改index...
Webpack和Vite的区别
qq_45464944的博客
09-12 1418
什么是Webpack？什么是Vite？webpack和Vite的区别是什么？
【webpack4系列】webpack基础用法（二）
最新发布
mengran_code的博客
09-15 1307
我们需要注意的是，polyfill的体积是很大的，如果我们不做特殊说明，它会把你目标浏览器中缺失的所有的es6的新的功能都做垫片处理。但是我们没有用到的那部分功能的转换其实是无意义的，造成打包后的体积无谓的增大，所以通常，我们会在presets的选项里，配置"useBuiltIns": “usage”,这样一方面只对使用的新功能做垫片，另一方面，也不需要我们单独引入import '@babel/polyfill’了，它会在使用的地方自动注入。经过 Webpack 的处理，最终会输出浏览器能使用的静态资源。
高级前端开发webpack
10-17
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它是一个模块打包工具，可以将多个模块打包成一个文件，以便在浏览器中使用。Webpack 可以处理 JavaScript、CSS、图片等多种资源，并且可以通过插件机制进行扩展。 对于高级前端开发人员来说，掌握 Webpack 是非常重要的。以下是一些关于 Webpack 的常见问题和答案： 1. Webpack 的主要功能是什么？ Webpack 的主要功能是将多个模块打包成一个或多个文件，以便在浏览器中使用。它可以处理 JavaScript、CSS、图片等多种资源，并且可以通过插件机制进行扩展。 2. 如何安装 Webpack？ 可以使用 npm 安装 Webpack。在命令行中运行以下命令即可： ``` npm install webpack --save-dev ``` 3. 如何配置 Webpack？ Webpack 的配置文件是一个 JavaScript 文件，通常命名为 webpack.config.js。在配置文件中，可以指定入口文件、输出文件、加载器、插件等信息。以下是一个简单的 Webpack 配置文件示例： ```javascript module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: __dirname + '/dist' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader' } }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; ``` 4. Webpack 的加载器是什么？ Webpack 的加载器是用于处理各种类型的文件的工具。例如，可以使用 babel-loader 处理 ES6 代码，使用 css-loader 处理 CSS 文件，使用 file-loader 处理图片等。 5. Webpack 的插件是什么？ Webpack 的插件是用于扩展 Webpack 功能的工具。例如，可以使用 HtmlWebpackPlugin 插件生成 HTML 文件，使用 UglifyJsPlugin 插件压缩 JavaScript 代码等。 6. 如何在 Webpack 中使用 ES6 模块？ Webpack 默认支持 ES6 模块。可以在入口文件中使用 import 和 export 关键字来导入和导出模块。 7. 如何在 Webpack 中使用 CSS？ 可以使用 css-loader 和 style-loader 来处理 CSS 文件。css-loader 用于加载 CSS 文件，style-loader 用于将 CSS 插入到 HTML 页面中。 8. 如何在 Webpack 中使用图片？ 可以使用 file-loader 或 url-loader 来处理图片。file-loader 可以将图片复制到输出目录中，url-loader 可以将图片转换为 base64 编码并嵌入到 JavaScript 文件中。 9. 如何在 Webpack 中使用 React？ 可以使用 babel-loader 来处理 JSX 语法，并使用 react-hot-loader 实现热更新。以下是一个简单的 Webpack 配置文件示例： ```javascript module.exports = { entry: [ 'react-hot-loader/patch', './src/index.js' ], output: { filename: 'bundle.js', path: __dirname + '/dist' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } } } ] }, plugins: [ new webpack.HotModuleReplacementPlugin() ], devServer: { hot: true } }; ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值