【Webpack配置全解析】打造你的专属构建流程️(1-4)

webpack 提供的 CLI 支持很多参数,例如 --mode,但更多的时候,我们会使用更加灵活的配置文件来控制 webpack 的行为。默认情况下,webpack 会读取 webpack.config.js 文件作为配置文件,但也可以通过 CLI 参数 --config 来指定某个配置文件。

配置文件中通过 CommonJS 模块导出一个对象,对象中的各种属性对应不同的 webpack 配置。配置文件中的代码必须是有效的 Node.js 代码。当命令行参数与配置文件中的配置出现冲突时,以命令行参数为准。

基本配置

以下是一些常见的 webpack 配置项:

  1. mode:编译模式,字符串,取值为 developmentproduction,指定编译结果代码运行的环境,会影响 webpack 对编译结果代码格式的处理。
  2. entry:入口,字符串或数组,指定入口文件。
  3. output:出口,对象,指定编译结果文件。
示例配置文件
const path = require('path');module.exports = {// 编译模式mode: 'development', // 或 'production'// 入口文件entry: './src/index.js', // 单个入口// entry: {//   main: './src/index.js', // 多个入口//   another: './src/another.js'// },// 出口文件output: {filename: 'bundle.js', // 输出文件名path: path.resolve(__dirname, 'dist') // 输出路径},// 模块规则module: {rules: [{test: /\.js$/, // 匹配 .js 文件exclude: /node_modules/, // 排除 node_modules 目录use: {loader: 'babel-loader' // 使用 Babel 转换 ES6 代码}},{test: /\.css$/, // 匹配 .css 文件use: ['style-loader', 'css-loader'] // 使用 style-loader 和 css-loader}]},// 插件plugins: [new HtmlWebpackPlugin({template: './src/index.html' // 使用模板生成 HTML 文件})],// 开发服务器devServer: {contentBase: './dist', // 静态文件根目录hot: true // 热模块替换}
};
详细解释
  1. mode:编译模式

    • development:开发模式,不会对代码进行压缩,适合开发环境。
    • production:生产模式,会对代码进行压缩和优化,适合生产环境。
  2. entry:入口文件

    • 单个入口:entry: './src/index.js'
    • 多个入口:entry: { main: './src/index.js', another: './src/another.js' }
  3. output:出口文件

    • filename:输出文件名。
    • path:输出路径,使用 path.resolve 确保路径是绝对路径。
  4. module:模块规则

    • rules:定义一组规则,用于处理不同类型的文件。
      • test:匹配文件的正则表达式。
      • exclude:排除某些文件或目录。
      • use:使用的加载器(loader)。
  5. plugins:插件

    • 插件用于执行更复杂的任务,如生成 HTML 文件、压缩代码等。
    • 例如,HtmlWebpackPlugin 用于生成 HTML 文件。
  6. devServer:开发服务器

    • contentBase:静态文件根目录。
    • hot:启用热模块替换(HMR),在开发过程中自动刷新页面。
使用配置文件
  1. 创建配置文件

    在项目根目录下创建 webpack.config.js 文件,内容如上所示。

  2. 安装必要的依赖

    npm install --save-dev webpack webpack-cli babel-loader @babel/core @babel/preset-env html-webpack-plugin
    
  3. 运行构建

    package.json 中添加一个 build 脚本:

    {"scripts": {"build": "webpack"}
    }
    

    然后运行:

    npm run build
    
  4. 启动开发服务器

    如果你配置了 devServer,可以通过以下命令启动开发服务器:

    npx webpack serve
    

总结

通过本课程,你已经基本掌握了如何使用 webpack 配置文件来控制构建过程。配置文件提供了更灵活的方式来管理复杂的构建任务,使得开发更加高效和便捷。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

手机上用什么方法可以切换ip

手机上用什么方法可以切换IP?在某些特定情境下,用户可能需要切换手机的IP地址,以满足网络安全、隐私保护或绕过地域限制等需求。下面以华为手机为例,将详细介绍手机IP地址切换的几种方法,帮助用户轻松实现这一目标。 一…

python可视化将多张图整合到一起(画布)

这周有点事忙着,没时间重温刚结束的Mathurcup数学建模,这两天也是再看了下,论文还是赶紧挺烂的,但比国赛又有进步(说起国赛又不得不抱怨了,基本其余省份都发了,但江西......哎)。哎&…

vue2,vue3,uniapp,小程序实现前端url生成二维码

最近遇到一个项目,api返回url地址,前端通过地址生成二维码。 话不多说直接上代码,亲测有效,希望能帮助大家,同时如果有更好的方法希望大家能够分享 1、第一步,在项目的utils文件夹下面创建一个weapp-qrco…

【韩老师零基础30天学会Java】01章

什么是程序? JavaEE企业版 示例1 public class Test{public static void main(String[] args){int res11;System.out.println("result"res);}}D:\Java\code>javac Test.javaD:\Java\code>java Test 缁撴灉2D:\Java\code>javac Test.javaD:\Java…

华为交换机实现不同VLAN内的互通配置(汇聚层设备作为网关)

背景如下: 如下图所示,PC1和PC2分别属于VLAN 2和VLAN 3,通过接入层设备DeviceB接入汇聚层设备DeviceA。PC3属于VLAN 4,通过接入层设备DeviceC接入汇聚层设备DeviceA。DeviceC不做任何配置,当做HUB即插即用。汇聚层设备…

SpringBoot旅游酒店系统源码免费分享+本地部署及介绍 - 幽络源

初步介绍 这是一套基于SpringBoot的旅游酒店系统,含有前台和后台,需要注意的是图片文件是存放于target中的,因此不建议删除这个临时目录。 原文及源码获取链接 > SpringBoot旅游酒店管理系统免费分享-幽络源 所需环境 JDK1.8、Maven、…

Java开发中的分布式锁使用教程

1. 基于ZooKeeper的分布式锁 1.1 引入依赖 在项目的pom.xml文件中添加以下依赖&#xff1a; <dependency><groupId>org.apache.curator</groupId><artifactId>curator-framework</artifactId><version>latest</version> </dep…

zynq pl设计中断问题

问题 逻辑工程师vivado工具生成的pl hdf文件后,通过xilinx的工具解析的的dts文件,会出现中断号异常的问题。 原始问题肯定是硬件表现为通讯异常,此处以网口为例,则网口不通。 网口查询 uboot下网口信息 如下命令查询到 两个mac下对应的phy,地址分别为4和6,和硬件设计一…

Scala 的包及其导入

Scala使用包来创建用于模块化程序的命名空间。通过在Scala文件的顶部声明一个或多个包名称可以创建包&#xff0c;另一种声明包的方式是使用0&#xff0c;这种方式可以嵌套包&#xff0c;并且提供更好的范围与封装控制。对于包的导入&#xff0c;Scala与Java的区别之一便是&…

【MySQL】关于MySQL启动后mysqld_safe和mysqld进程

在mysql服务器启动后&#xff0c;有2个进程mysqld_safe和mysqld,这是为啥&#xff1f; # ps -ef | grep mysqld root 6488 3324 0 Sep03 pts/0 00:00:00 /bin/sh /mysqlsoft/mysql/bin/mysqld_safe --defaults-file/etc/my.cnf --usermysql mysql 7327 6488 0 Sep03 pts/0 0…

Rust @绑定(Rust@绑定)(在模式匹配的同时将值绑定到变量)

文章目录 Rust中的绑定基础概念示例&#xff1a;基本模式匹配 绑定的使用示例&#xff1a;范围匹配并绑定变量 深入探索绑定的好处示例&#xff1a;复杂数据结构中的应用 总结 附加 Rust中的绑定 Rust 语言以其强类型系统和内存安全的特性著称。在进行模式匹配时&#xff0c;R…

数据结构-图的概念

不存在空图现象,顶点集不能为空,边集可以为空 研究链接一个顶点的边有多少条非常有意义 无向图的度边的二倍 有向图的入度出度,度边数 有向图一致 重点 子图必须联通,尽可能多的边和结点 对于一个生成树,他有n个节点就有n-1条边 修路问题将各个村庄相连,由于经费有限,只能选择…

黑马程序员Redis学习【持续更新】

Redis基础 一、Redis入门 1.Redis简介 【1】为什么学习Redis Redis是一个基于内存的key-value结构数据库。「Remote Dictionary Service」的首字母缩写&#xff0c;也就是「远程字典服务-remote dictionary server」。 基于内存存储&#xff0c;读写性能高适合存储热点数据…

利用SEO在4个月内打造每月940美元的导航站

在软件开发领域&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;的潜力常常被人们低估&#xff0c;但它却能为网站增长带来显著效果。特别是在AI技术的加持下&#xff0c;你可以极大地加速流量增长并自动化大部分工作。本文将详细介绍一名Reddit用户如何在4个月内&#xf…

字节青训-数字字符串格式化

问题描述 小M在工作时遇到了一个问题&#xff0c;他需要将用户输入的不带千分位逗号的数字字符串转换为带千分位逗号的格式&#xff0c;并且保留小数部分。小M还发现&#xff0c;有时候输入的数字字符串前面会有无用的 0&#xff0c;这些也需要精简掉。请你帮助小M编写程序&…

HER304-ASEMI轴向高效恢复二极管HER304

编辑&#xff1a;ll HER304-ASEMI轴向高效恢复二极管HER304 型号&#xff1a;HER304 品牌&#xff1a;ASEMI 封装&#xff1a;DO-27 特性&#xff1a;轴向高效恢复二极管 正向电流&#xff1a;3A 反向耐压&#xff1a;300V 恢复时间&#xff1a;35ns 引脚数量&#xf…

信息宣传投稿栽跟头不可怕,关键是你要能再站起来

在繁忙的市郊,一家的事业基层单位,这里汇聚了各路英才,每个科室都有自己的专长。然而,有一项任务,让这些精英们头疼不已——单位信息宣传投稿。 起初,大家对这项任务并不以为然,以为不过是小菜一碟。李科长甚至开玩笑说:“不就是写篇文章,投个稿嘛,我们这些笔杆子还怕这个?”…

iMeta | 复杂热图(ComplexHeatmap)可视化文章最新版,画热图就引它

复杂热图可视化 https://doi.org/10.1002/imt2.43 PROTOCOL ●2022年8月&#xff0c;德国癌症研究中心顾祖光在iMeta在线发表了题为“Complex heatmap visualization”的方法类文章。 ● 该研究系统性地介绍了 ComplexHeatmap R包在复杂热图可视化方面的特性和功能。 ● 第…

HTTP的了解

从输入 URL 到页面展示到底发生了什么&#xff1f;&#xff08;非常重要&#xff09; 类似的问题&#xff1a;打开一个网页&#xff0c;整个过程会使用哪些协议&#xff1f; 先来看一张图&#xff08;来源于《图解 HTTP》&#xff09;&#xff1a; 上图有一个错误需要注意&…

博弈论(所有情况最优解)——课堂笔记

博弈论(所有情况最优解)——课堂笔记|【博弈论】分割数游戏-CSDN博客https://blog.csdn.net/back_room/article/details/143464453?spm=1001.2014.3001.5501【博弈论】拍卖土地-CSDN博客