【知识科普】今天聊聊前端打包工具webpack

文章目录

    • webpack概述
      • 1. 入口(Entry)
      • 2. 输出(Output)
      • 3. Loader
      • 4. 插件(Plugins)
      • 5. 模式(Mode)
      • 6. 浏览器兼容性(Browser Compatibility)
      • 7. 环境(Environment)
      • 8. Source Maps
      • 9. 性能(Performance)
    • 🛠️ Webpack有哪些常用的插件推荐?
    • webpack常用配置项
    • 完整配置样例
    • 📦 如何优化 Webpack 构建速度

webpack概述

Webpack是一个现代JavaScript应用程序的静态模块打包工具,它能够将项目中的所有依赖项(包括JavaScript模块、图片、CSS等)打包成一个或多个bundle,供浏览器使用。以下是Webpack的一些详细介绍和核心概念:

1. 入口(Entry)

Webpack的入口起点(entry point)指示Webpack应该使用哪个模块作为构建其内部依赖图的开始。默认情况下,Webpack的入口起点是src/index.js,但你可以通过在Webpack配置文件中配置entry属性来指定一个或多个不同的入口起点。

2. 输出(Output)

Webpack的输出(output)属性告诉Webpack在哪里输出它所创建的bundle,以及如何命名这些文件。默认情况下,主要输出文件的默认值是./dist/main.js,其他生成文件默认放置在./dist文件夹中。你可以通过在配置中指定一个output字段来配置这些处理过程。

3. Loader

Webpack默认只能理解JavaScript和JSON文件。Loader让Webpack能够处理其他类型的文件,并将它们转换为有效的模块,以供应用程序使用。Loader在Webpack的配置中有两个属性:test属性用于识别哪些文件会被转换,use属性定义了在进行转换时应该使用哪个loader。

4. 插件(Plugins)

插件(Plugins)是用来扩展Webpack功能的。它们可以在Webpack的构建过程中生效,执行相关的任务。Loader主要用于转换文件,而插件可以直接对整个构建过程起作用。例如,提供热重载功能、优化JS文件、生成CSS文件等。

5. 模式(Mode)

Webpack 4引入了mode属性,它允许你设置开发环境(development)或生产环境(production)。设置mode可以启用相应的优化和代码警告。例如,在生产模式下,Webpack会启用一些性能优化和压缩JS文件的插件。

6. 浏览器兼容性(Browser Compatibility)

Webpack可以处理现代JavaScript代码,并将其转换为浏览器兼容的代码。这通常通过使用Babel-loader和其他相关插件来实现。

7. 环境(Environment)

Webpack允许你定义环境变量,这些变量可以在构建过程中使用。这对于在不同环境下(如开发、测试和生产环境)使用不同的配置非常有用。

8. Source Maps

Source Maps是Webpack的一个功能,它允许你在开发过程中将转换后的代码映射回原始源代码,从而使得调试变得更加容易。

9. 性能(Performance)

Webpack提供了性能相关的配置选项,如performance.maxAssetSizeperformance.hints,用于控制生成的资源文件的大小,并在超出指定大小时提供警告。

通过这些核心概念和配置选项,Webpack可以帮助你构建一个高效、优化的前端应用程序。更多详细信息可以参考Webpack的官方文档。

🛠️ Webpack有哪些常用的插件推荐?

Webpack是一个功能强大的模块打包工具,它能够将项目中的各种资源文件(如JavaScript、CSS、图片等)打包成一个或多个bundle,以供浏览器使用。Webpack通过插件(Plugins)来扩展其功能,以下是一些常用的Webpack插件及其作用:

  1. HtmlWebpackPlugin

    • 自动创建HTML文件,并将其与Webpack打包的静态资源关联起来。这样可以确保HTML文件中引用的资源文件是最新的。
  2. MiniCssExtractPlugin

    • 将CSS提取为独立的文件,而不是内联在JavaScript文件中。这对于性能优化和缓存控制非常有用。
  3. CleanWebpackPlugin

    • 在打包前清理上一次项目生成的bundle文件,避免旧文件累积。这个插件在生产环境中尤其有用。
  4. UglifyJsPlugin

    • 使用UglifyJS对JavaScript文件进行压缩,以减少文件大小。虽然Webpack 4中引入了TerserPlugin作为替代,但UglifyJsPlugin仍然被广泛使用。
  5. TerserPlugin

    • Webpack 4中引入的插件,用于压缩JavaScript文件,替代了UglifyJsPlugin。它提供了更好的性能和更多的压缩选项。
  6. CompressionWebpackPlugin

    • 用于gzip压缩输出的资源文件,以减少文件传输大小,提高加载速度。
  7. DefinePlugin

    • 允许在编译时定义全局常量,这在开发环境和生产环境之间切换时非常有用。
  8. HotModuleReplacementPlugin

    • 用于开发环境中,实现模块的热替换,提高开发效率。
  9. CopyWebpackPlugin

    • 用于将项目中的静态资源(如图片、字体等)复制到输出目录,而不需要通过importrequire来引用。
  10. IgnorePlugin

    • 用于忽略某些特定的模块或文件,不让它们被Webpack打包。

这些插件可以通过npm安装,并在Webpack配置文件中引入和配置。使用这些插件可以大大增强Webpack的功能,帮助开发者更好地管理和优化前端资源。更多详细信息可以参考Webpack的官方文档和相关社区资源。

webpack常用配置项

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器,它可以将项目中的所有依赖项(包括 JavaScript 文件、图片、CSS 等)打包成一个或多个 bundle。在 Webpack 中,配置文件是一个非常重要的部分,它告诉 Webpack 如何处理项目中的资源。

Webpack 的配置文件通常是一个名为 webpack.config.js 的文件,位于项目的根目录下。这个文件是一个 Node.js 模块,因此你可以使用 Node.js 的所有功能,如 require__dirnamepath 模块等。

以下是 webpack.config.js 文件中常见的一些配置项:

  1. entry:指定了构建的入口起点。这些文件将被 Webpack 处理,然后所有依赖的模块都会被包含在最终的 bundle 中。
module.exports = {entry: './path/to/your/entry/file.js'
};
  1. output:定义了输出选项,告诉 Webpack 如何输出最终的 bundle,包括文件名、目录等。
module.exports = {// ...output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')}
};
  1. module:用于定义如何处理不同文件类型的加载器(loaders)和插件(plugins)。
module.exports = {// ...module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']}}}]}
};
  1. plugins:用于在构建过程中执行更复杂的任务,如优化、压缩、定义环境变量等。
module.exports = {// ...plugins: [new webpack.optimize.UglifyJsPlugin()]
};
  1. resolve:用于配置模块如何被解析,例如文件扩展名、别名等。
module.exports = {// ...resolve: {extensions: ['.js', '.json'],alias: {utils: path.resolve(__dirname, 'src/utils/')}}
};
  1. devtool:用于配置源映射(source maps),以便于在开发过程中调试。
module.exports = {// ...devtool: 'source-map'
};
  1. devServer:用于配置 Webpack 开发服务器,它是一个小型的静态服务器,用于在开发过程中提供你的应用。
module.exports = {// ...devServer: {contentBase: './dist',hot: true}
};
  1. mode:用于设置模式,可以是 developmentproductionnone。这个配置项会影响性能和优化选项。
module.exports = {mode: 'development'
};

这些是 Webpack 配置文件中最常见的一些配置项,但 Webpack 的配置非常灵活,可以根据项目的具体需求进行更多的自定义。你可以通过 Webpack 官方文档了解更多配置项和高级用法。

完整配置样例

当然,下面是一个简单的 Webpack 配置文件示例,它包含了一些常见的配置项。这个示例假设你正在构建一个多页面的前端应用,并且使用了 Babel 来转译 JavaScript 代码。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {// 入口文件配置entry: {'page1': './src/page1/index.js','page2': './src/page2/index.js',},// 输出配置output: {filename: '[name].[contenthash].js', // 使用内容hash值来命名文件path: path.resolve(__dirname, 'dist'), // 输出路径clean: true, // 在构建之前清理/dist文件夹},// 模块加载规则module: {rules: [{test: /\.js$/, // 匹配.js文件exclude: /node_modules/, // 排除node_modules目录use: {loader: 'babel-loader', // 使用babel-loaderoptions: {presets: ['@babel/preset-env'], // 使用@babel/preset-env预设},},},{test: /\.css$/, // 匹配.css文件use: [MiniCssExtractPlugin.loader, 'css-loader'], // 使用MiniCssExtractPlugin.loader和css-loader},// ...可以添加更多规则,例如处理图片、字体等],},// 插件配置plugins: [new CleanWebpackPlugin(), // 清理/dist文件夹new MiniCssExtractPlugin({ // 抽离CSS到单独文件filename: '[name].[contenthash].css',}),// 创建HTML文件Object.keys(config.entry).forEach((name) => {new HtmlWebpackPlugin({template: path.resolve(__dirname, 'src', name, 'index.html'),filename: `${name}.html`,chunks: ['runtime', name],inject: true,});}),// ...可以添加更多插件],// 解析配置resolve: {extensions: ['.js', '.css'], // 自动解析的扩展名列表alias: {// 别名配置,方便引入模块'@': path.resolve(__dirname, 'src'),},},// 开发服务器配置devServer: {static: './dist', // 服务器的静态文件目录compress: true, // 是否启用gzip压缩hot: true, // 是否启用模块热替换(HMR)port: 8080, // 服务器端口},// 模式配置mode: 'development', // 'production' | 'development' | 'none'
};

这个配置文件定义了一个多页面应用的构建流程,其中包含了 JavaScript 和 CSS 的处理。它使用了 html-webpack-plugin 来为每个入口点生成一个 HTML 文件,mini-css-extract-plugin 来将 CSS 提取到单独的文件中,以及 clean-webpack-plugin 来在每次构建前清理 /dist 目录。

请注意,这个配置文件需要安装相应的 npm 包:

npm install --save-dev html-webpack-plugin clean-webpack-plugin mini-css-extract-plugin babel-loader @babel/core @babel/preset-env webpack webpack-cli

此外,你还需要在 webpackwebpack-cli 的配置中添加适当的版本号。这个示例仅用于演示,实际项目中可能需要根据具体需求进行调整。

📦 如何优化 Webpack 构建速度

优化 Webpack 构建速度可以通过以下方式实现,并给出相应的配置样例:

  1. 使用 thread-loader 实现多进程并行处理

    • 通过 thread-loader 可以将任务分配到多个子进程中去执行,特别适合于处理 CPU 密集型任务,如 Babel 转译或 ESLint 检查。
    const os = require('os');
    const threadLoader = require('thread-loader');
    const { cpus } = os;module.exports = {module: {rules: [{test: /\.js$/,use: [{loader: 'thread-loader',options: {workers: cpus.length,},},'babel-loader',],exclude: /node_modules/,},],},plugins: [// 使用 ESLint 插件并开启多进程new ESLintWebpackPlugin({threads: true,cache: true,}),],
    };
    
  2. 利用持久化缓存提升构建性能

    • Webpack 5 引入了持久化缓存,可以将构建过程中的数据缓存到文件系统中,这样在后续的构建中可以复用这些数据,避免重复的计算。
    module.exports = {cache: {type: 'filesystem', // 使用文件缓存},
    };
    
  3. 优化 resolve 配置

    • 通过合理配置 resolve 参数,减少模块搜索的层级,加快文件查找速度。
    module.exports = {resolve: {modules: [path.resolve(__dirname, 'src'), 'node_modules'],extensions: ['.js', '.jsx', '.json'],},
    };
    
  4. 使用 DllReferencePluginDllPlugin

    • 通过动态链接库(DLL)打包不常变化的库文件,避免每次构建时重复打包。
    const webpack = require('webpack');
    module.exports = {plugins: [new webpack.DllReferencePlugin({manifest: require('./dll-manifest.json'),}),],
    };
    
  5. 合理使用 SourceMap

    • 在开发环境中使用 eval 源映射以加快构建速度,在生产环境中关闭源映射或使用 hidden-source-map 以隐藏源代码。
    module.exports = {devtool: 'eval-source-map',
    };
    
  6. 开启 babel-loader 的缓存

    • 对于 Babel 编译过程,可以通过开启缓存来避免重复编译,提高构建速度。
    module.exports = {module: {rules: [{test: /\.js$/,use: [{loader: 'babel-loader',options: {cacheDirectory: true,},},],},],},
    };
    
  7. 使用 splitChunksPlugin 进行代码分割

    • 通过代码分割将第三方库和公共模块分离出来,减少主bundle的大小,提高构建速度。
    module.exports = {optimization: {splitChunks: {chunks: 'all',},},
    };
    
  8. 使用 TerserPlugin 进行代码压缩

    • 在生产环境中使用 TerserPlugin 对代码进行压缩,减少文件大小,提高加载速度。
    const TerserPlugin = require('terser-webpack-plugin');
    module.exports = {optimization: {minimizer: [new TerserPlugin({parallel: true, // 开启多进程cache: true,    // 开启缓存}),],},
    };
    
  9. 使用 ImageMinimizerPlugin 压缩图片

    • 对项目中的图片资源进行压缩,减少文件大小,提高构建速度。
    const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
    module.exports = {plugins: [new ImageMinimizerPlugin({minimizer: {implementation: ImageMinimizerPlugin.imageminGenerate,options: {plugins: ['gifsicle', 'jpegtran', 'optipng', 'svgo'],},},}),],
    };
    

通过这些优化策略,可以显著提升 Webpack 的打包速度,尤其是在大型项目中效果更为明显。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/56563.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle 使用位图索引 Cost降低200倍! 探讨位图索引的利与弊

一.简介 位图索引(Bitmap Index) 是 Oracle 数据库中一种特殊类型的索引,适用于低基数(Low Cardinality)列,即那些列中可选值相对较少的情况下使用。它与常规的 B-tree 索引不同,位图索引通过位…

Vue组件学习 | 二、Vuex组件

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。以下是 Vuex 的基本用法 Vuex 基本用法 安装 Vuex 首先,你需要安装 Vuex。如果你使用的是 n…

003:无人机概述

摘要:本文介绍无人机的定义和分类、无人机系统定义、民用无人机驾驶员分类和应用领域。 一、无人机的定义和分类 1.无人机定义 无人机是一种能够在无人驾驶的条件下完成复杂空中飞行任务和各种负载任务的飞行器,可以被视为“空中机器人”。它利用先进的…

(48)MATLAB使用firls函数设计均衡器

文章目录 前言一、频域均衡器的设计二、MATLAB源代码1.firls函数与freqz函数2.MATLAB仿真源代码3.代码说明 三、仿真结果画图 前言 利用MATLAB的firls函数,根据所要求的频率向量和频响幅度向量,设计出所需的均衡器,使得包括滤波器在内的系统…

【python爬虫】python的requests模块使用`Session`对象可以保持会话状态,自动处理Cookie等信息

1. 请求发送 网络爬虫的第一步是发送HTTP请求。Python中的requests库是发送请求的首选工具,它简单易用且功能强大。 使用requests库 import requestssession requests.Session() session.headers {"User-Agent": "Mozilla/5.0",# 其他请求…

qt 构建、执行qmake、运行、重新构建、清除

qt右键功能有 构建、执行qmake、运行、重新构建、清除,下面简单介绍一下各个模块的作用。 1. 执行qmake qmake是一个工具, 它根据pro文件生成makefile文件,而makefile文件中则定义编译与连接的规则。pro文件中定义了头文件,源文件…

C语言_通讯录_进阶

引言:在之前的项目中,我们所用的通讯录是静态版本,也就是常规的固定数组大小,但仔细思考,在现实的复杂环境中,是很难做到这样死板,所以在学习过动态内存的章节后,我们将通讯录重新修…

Spring Cache Caffeine 高性能缓存库

​ Caffeine 背景 Caffeine是一个高性能的Java缓存库,它基于Guava Cache进行了增强,提供了更加出色的缓存体验。Caffeine的主要特点包括: 高性能:Caffeine使用了Java 8最新的StampedLock乐观锁技术,极大地提高了缓存…

三国杀钓鱼自动化

三国杀钓鱼脚本 前言 本来是想做必杀的,但是后来测试了大约400钓发现纯靠连点没有漏掉的鱼,所以必杀功能就舍弃了。 我pyinstaller打包后运行.exe居然黑屏了???可能是多进程报错处理没写好,反正还是用vsc…

笔试第五行

static作用: 1.函数体内,一个被声明为静态的变量在这一函数被调用时值维持不变。 2.函数体外,模块内,一个被声明为静态的变量可以被模块内函数访问,但不能模块外函数访问,这是一个本地的全局变量。 3.模…

k8s部署使用有状态服务statefulset部署eureka集群,需登录认证

一、构建eureka集群镜像 1、编写dockerfile文件,此处基础镜像为arm版本,eureka目录中文件内容:application-dev.yml、Dockerfile、eureka-server-1.0-SNAPSHOT.jar(添加登录认证模块,文章最后附上下载连接) FROM mdsol/java8-j…

Go使用exec.Command() 执行脚本时出现:file or directory not found

使用 Go 提供的 exec.Command() 执行脚本时出现了未找到脚本的 bug,三个排查思路 : exec.Command(execName, args…) 脚本名字不允许相对路径 exec.Command(execName, args…) execName 只能有脚本名,不允许出现参数 如果你是使用 Windows …

为什么要使用网络IO内存数据库?

1.摘要 学习Redis的时候,我有个疑问:Redis缓存是内存数据库,但是它部署在独立的一个服务器上,那么应用服务器访问redis不是要通过网络吗,那么是不是还不如从本地服务器读取数据库的效率 ?结论是&#xff1a…

Ubuntu github 网速慢 打不开

1.在ipaddress 网站查找一下github的dns 并复制到/etc/hosts https://www.ipaddress.com/website/github.com/ 140.82.113.4 github.com 185.199.108.133 raw.githubusercontent.com #185.199.109.133 raw.githubusercontent.com #185.199.110.133 raw.githubusercontent.com …

[图像处理] 基于CleanVision库清洗图像数据集

CleanVision是一个开源的Python库,旨在帮助用户自动检测图像数据集中可能影响机器学习项目的常见问题。该库被设计为计算机视觉项目的初步工具,以便在应用机器学习之前发现并解决数据集中的问题。CleanVision的核心功能包括检测完全重复、近似重复、模糊…

ML 系列:机器学习和深度学习的深层次总结(17)从样本空间到概率规则概率

一、说明 概率是支撑大部分统计分析的基本概念。从本质上讲,概率提供了一个框架,用于量化不确定性并对未来事件做出明智的预测。无论您是在掷骰子、预测天气还是评估金融市场的风险,概率都是帮助您驾驭不确定性的工具。本篇将讲授概率的原理和…

论文阅读:Guided Linear Upsampling

今天介绍一篇有趣的文章,Guided Linear Upsampling,基于引导的线性上采样,这是发表在 ACM transaction on Graphic 的一篇工作。 Abstract 引导上采样是加速高分辨率图像处理的一种有效方法。在本文中,文章作者提出了一种简单而…

博客搭建之路:hexo搜索引擎收录

文章目录 hexo搜索引擎收录以百度为例 hexo搜索引擎收录 hexo版本5.0.2 npm版本6.14.7 next版本7.8.0 写博客的目的肯定不是就只有自己能看到,想让更多的人看到就需要可以让搜索引擎来收录对应的文章。hexo支持生成站点地图sitemap 在hexo下的_config.yml中配置站点…

问:MySQL表过大,你有哪些优化实践?

当MySQL单表记录数过大时,数据库的CRUD(创建、读取、更新、删除)性能会明显下降。为了提升性能,我们需要采取一些优化措施。本文将详细介绍几种常见的优化方案。 1. 限定数据的范围 描述 务必禁止不带任何限制数据范围条件的查…

优先算法——移动零(双指针)

目录 1. 题目解析 2. 算法原理 3.代码实现 题目: 力扣题目链接:移动零 1. 题目解析 题目截图如下: 不过要注意,这个移动题目要求是在原数组中原地操作,不能新额外开辟一个数组来修改。 2. 算法原理 这个原理可以称之为数…