node 第二十一天 webpack 初见

  1. 为什么需要学习(了解)webpack
    webpack是前端工程化的基石,webpack又是基于node进行文件打包bundle,所以作为前端起手学习node服务端开发,同时学习webpack是很有必要的。
    随着vite的出现,vue这一脉可能也许不再需要学习webpack了,但是需要知道的是,打包一定是前端工程化绕不开的一个概念,如果是一个足够了解webpack的开发者,日后再学习任何一款前端构建工具都将事半功倍。
    但是webpack本身却是是复杂的。真要深入学习付出是必不可少的。
    经过基础学习之后能够具备对问题顺藤摸瓜的能力,这是基础要求。

  2. webpack概念

    本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。

  3. webpack核心配置项

    • webpack.common.js 基本配置项 入口(entry), 出口(output), 插件(plugins),模块打包(loader)
      const path = require('path');
      const HtmlWebpackPlugin = require('html-webpack-plugin');
      const webpack = require('webpack');
      const MyPlugin = require('./myPlugin');module.exports = {// 入口 可多个entry: './src/main.js',// 出口 可多个output: {path: path.resolve(__dirname, 'dist'),filename: 'build.js'},// 插件plugins: [new webpack.DefinePlugin({VERSION: JSON.stringify('1.0.0')}),new HtmlWebpackPlugin({ template: './public/index.html', title: 'webpack app' }),new MyPlugin()],// 模块loadermodule: {rules: [{test: /\.css$/i,use: ['style-loader', 'css-loader', './myLoader']}]}
      };
    • webpack.dev.js 开发环境配置项 代理服务器(devServer) 调试工具(devtool)
      const { merge } = require('webpack-merge');
      const path = require('path');
      const common = require('./webpack.common.js');
      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');module.exports = merge(common, {plugins: [new BundleAnalyzerPlugin({analyzerPort: 8888,openAnalyzer: false})],// 模式mode: 'development',// devServerdevServer: {static: {// 告诉服务器从哪里提供内容。只有在你希望提供静态文件时才需要这样做。static.publicPath 将会被用来决定应该从哪里提供 bundle,并具有优先级。publicPath: '/',directory: path.join(__dirname, 'public')},host: 'localhost',port: 8080,open: true},// source-map 会在webpack打包生成的文件模块的末端 加上 //# sourceURL=// 映射source-mapdevtool: 'inline-source-map'
      });
      
    • webpack.prod.js 生产环境配置项 externals(打包剔除优化)
      const { merge } = require('webpack-merge');
      const common = require('./webpack.common.js');
      const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
      const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = merge(common, {plugins: [new CleanWebpackPlugin(),new BundleAnalyzerPlugin({analyzerPort: 1055,openAnalyzer: false})],// 模式mode: 'production',// externals key: value// key和 import jQ from 'jquery'; 中的 'jquery' 一样// value 用于替换 import jQ from 'jquery' 中的jQ// 所以 value 必须和cdn引用暴露的window变量一样externals: {jquery: 'jQuery'}
      });
      
  4. main.js 顺着main.js我们往下看

    import './style.css';import jQ from 'jquery';const str = 'hello webpack';
    // 再webpack中
    // 告知 webpack 将 process.env.NODE_ENV 设置为一个给定字符串。
    // 如果 optimization.nodeEnv 不是 false,则会使用 DefinePlugin,optimization.nodeEnv 默认值取决于 mode,
    // 如果为 falsy 值,则会回退到 "production"。
    console.log(process.env.NODE_ENV);
    //打包常量直接替换为 console.log('hello webpack');
    console.log(str);
    //生产环境用cdn
    console.log(jQ);
    //webpack.DefinePlugin
    console.log(VERSION);// 开启 devtool: 'inline-source-map' 方便调试
    // console.log(VERSION.t.t);
    
  5. 实现js文件中引入css
    因为在webpack.common.js中配置了css模块的loader,这样webpack就能知道怎么去处理对应的文件,以及处理之后给js暴露一个什么样的对象

  6. 生产环境不将jquery打包,改用cdn引入
    因为在webpack.prod.js中配置了打包剔除优化(externals),结合使用插件HtmlWebpackPlugin 结合 ejs语法, 在html模板中实现生产环境使用cdn引入jquery,当然此处还涉及了如何判断开发环境和生产环境,用到了一个node进程对象变量process.env.NODE_ENV 默认情况取决于webpack配置项mode的值
    html模板如下

    <!DOCTYPE html>
    <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title><%= htmlWebpackPlugin.options.title %></title><% if (process.env.NODE_ENV === 'production' ) { %><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><% } %></head><body><h1>hello webpack server</h1></body>
    </html>
    
  7. 使用DefinePlugin 在 编译时 将代码中的变量替换为其他值或表达式
    这里你也可以用来区分开发环境和生产环境而不是使用process.env.NODE_ENV , 在main.js中我们输出了一个被定义为字符串1.0.0的VERSION,console.log(VERSION); ==> console.log('1.0.0');

  8. 实现MyLoader MyPlugincmd控制台打印MyLoader… MyPlugin… 自定义规则需要结合文档

    module.exports = function (source) {const content = source;console.log('MyLoader...');return content;
    };
    //loader 从右到左(或从下到上)地取值(evaluate)/执行(execute)
    //盲猜源码用了pop()
    
    module.exports = class MyPlugin {apply(compiler) {// 找到合适的事件钩子,实现自己的插件功能compiler.hooks.emit.tap('MyPlugin', () => {// compilation: 当前打包构建流程的上下文console.log('MyPlugin...');});}
    };
    

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

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

相关文章

HarmonyOS应用开发学习笔记 UIAbility组件与UI的数据同步 EventHub、globalThis

1、 HarmoryOS Ability页面的生命周期 2、 Component自定义组件 3、HarmonyOS 应用开发学习笔记 ets组件生命周期 4、HarmonyOS 应用开发学习笔记 ets组件样式定义 Styles装饰器&#xff1a;定义组件重用样式 Extend装饰器&#xff1a;定义扩展组件样式 5、HarmonyOS 应用开发…

TS:.d.ts 文件 和 declare 的作用

1 declare 做外部声明1.1 声明外部类型1.2 声明外部模块1.2.1 解决引入资源模块报错1.2.2 跳过对第三方库的类型检查 1.3 声明外部变量1.4 声明外部命名空间&#xff08;作用域&#xff09; 2 .d.ts 文件做外部声明3 declare global {} 在模块中做外部声明 先说一下我对 .d.ts文…

计算机缺失msvcp140.dll的修复教程,教你快速解决dll问题

“针对计算机系统中出现的msvcp140.dll文件丢失问题&#xff0c;小编将详细阐述一系列有效的解决方法。首先&#xff0c;msvcp140.dll是Microsoft Visual C Redistributable Package中的一个关键动态链接库文件&#xff0c;对于许多应用程序的正常运行至关重要。当系统提示该文…

RS触发器

转自&#xff1a;【基础】RS触发器_两个或非门构成rs触发器-CSDN博客 RS触发器为什么能 “保持上一状态” 触发器就是在常规的门电路的基础上加入了反馈&#xff0c;这样触发器就实现了存储数据的功能。这也是上面章节 “RS触发器实验” 的 RS触发器特征表 中第3条 “保持上一…

线性分解模型(LDM)的扩展方法——分析稀疏数据里的微生物组存在或缺失关联

谷禾健康 生态学家在分析微生物组和感兴趣的协变量(如临床结果或环境因素)之间的关联时&#xff0c;经常以两种方式查看物种分类计数数据。 一种是将计数视为定量的(即作为相对丰度数据进行分析)&#xff1b;另一种是将计数数据离散化&#xff0c;只表明一个分类单元在样本中是…

终极Linux命令宝典:从入门到精通,一网打尽!

文章目录 Linux命令详解1、Linux初级命令1.1、ls&#xff08;List&#xff09;1.1.1、ls-常用参数&#xff1a; 1.2、pwd&#xff08;Print Working Directory&#xff09;1.3、touch&#xff08;change file timestamps&#xff09;1.3.1、touch-常用参数 1.4、cat&tac (C…

Java多线程:创建多线程的三种方式

在Java中&#xff0c;有三种方式创建多线程&#xff0c;继承类Thread&#xff0c;继承接口Runnable&#xff0c;继承接口Callable。其中Thread和Runnable需要重写方法run&#xff0c;方法run没有返回值&#xff1b;Callable需要重写方法call&#xff0c;方法call可以返回值。 …

SAP OData(三)Query Option

Query option是指客户端在获取EntitySet的URL中后缀的一些指令&#xff0c;在第一篇第四小节我们已经见识了一部分Query指令。在下面表中列出了最重要的QueryOption。注意指令在URL中必须小写。 Operation Query Option Filtering and projecting $filter and $select Sort…

thinkphp6实现简单定时任务

thinkphp6实现定时任务 创建定时任务文件定义指令编写Test.php代码运行测试 创建定时任务文件 Test类名根据自己的需要修改 php think make:command Test testcommand文件夹在app目录下没有需要自己创建 运行上面的命令后会在command下 多一个Test.php文件 定义指令 在conf…

【Elasticsearch】Elasticsearch集群搭建详细手册

一、集群搭建 1.1.资源准备 服务器 192.168.X.26192.168.X.25192.168.X.24 安装包 elasticsearch-6.8.10.tar.gz 防火墙 所有服务器均开通9200,9300端口 1.2.安装组件 第一步&#xff1a;创建es安装目录 #在opt目录下创建soft目录 cd /opt mkdir soft第二步&#xff1a;上…

Java内存模型之原子性

文章目录 1.什么是原子性2.Java中的原子操作有哪些3.long和double的原子性4.原子操作 原子操作 ! 原子操作 1.什么是原子性 一系列的操作&#xff0c;要么全部执行成功&#xff0c;要么全部不执行&#xff0c;不会出现执行一半的情况&#xff0c;是不可分割的。 注意&#x…

探索SQL性能优化之道:实用技巧与最佳实践

SQL性能优化可能是每个数据库管理员和开发者在日常工作中必不可少的一个环节。在大数据时代&#xff0c;为确保数据库系统的响应速度和稳定性&#xff0c;掌握一些实用的SQL优化技巧至关重要。 本文将带着开发人员走进SQL性能优化的世界&#xff0c;深入剖析实用技巧和最佳实践…

Vue3访问不到$refs?

我试过了,getCurrentInstance()的方法 我试过 // 伪代码 <tinymce :ref"tinymceDate" />setup(){ let tinymceDate ref(null) const publish () > {console.log("hfq",tinymceDate.value)} return{...} }都不行 后面我试着在setup中使用setup…

深度学习笔记(四)——TF2构建基础网络常用函数+简单ML分类网络实现

文中程序以Tensorflow-2.6.0为例 部分概念包含笔者个人理解&#xff0c;如有遗漏或错误&#xff0c;欢迎评论或私信指正。 截图和程序部分引用自北京大学机器学习公开课 TF2基础常用函数 1、张量处理类 强制数据类型转换&#xff1a; a1 tf.constant([1,2,3], dtypetf.floa…

装机必看:电脑Bios里的CSM兼容模块是啥?打开有啥用?

前言 最近朋友装了一台新的电脑&#xff0c;用的i5-13490f的CPU。但是由于预算有限&#xff0c;手边只有一块GTX650ti&#xff0c;没办法&#xff0c;只好先这么用着了。 谁知道出现了个大问题&#xff1a;电脑开机居然没办法显示。 由于电脑所有的配件基本上都是全新的&…

随身WiFi选购要点!从此不再踩坑!高性价比高口碑随身wifi推荐,随身WiFi哪个牌子最好用

一、买随身WiFi注意事项 1.随身WiFi常见的芯片高通、马维尔和中兴微&#xff0c;其中高通芯片大部分都是报废手机拆下来的二手芯片&#xff0c;价格相对来说比较低&#xff0c;那种一二十块的随身WiFi&#xff0c;常用这种&#xff0c;优点便宜&#xff0c;缺点设备发烫&#…

ORACLE报错:ORA-04091 表XXX发生了变化,触发器/函数不能读它

ORACLE报错:ORA-04091 表发XXX生了变化&#xff0c;触发器/函数不能读它 问题描述问题分析解决办法拓展&#xff1a;自治事务的特点 问题描述 在开发校验函数FUNCTION的时候&#xff0c;用数据跑批测试的时候报错。经排查这个校验函数FUNCTION的被一个存储过程中的update语句调…

统计项目5000+,出具报表5分钟......捷顺科技数据中台怎么做?

捷顺创立于1992年&#xff0c;以智慧车行、人行出入口软硬件产品为依托&#xff0c;致力于智慧停车生态建设和运营&#xff0c;是出入口智能管理和智慧生态环境建设的开创者和引领者。 历经近三十年的发展&#xff0c;已经成为国内智慧停车领域的领军企业。公司集研、产、销一…

视频转码:掌握mp4视频格式转FLV视频的技巧,视频批量剪辑方法

在多媒体时代&#xff0c;视频格式的转换成为一种常见的需求。把MP4格式转换为FLV格式&#xff0c;FLV格式的视频文件通常具有较小的文件大小&#xff0c;同时保持了较好的视频质量。批量剪辑视频的方法能大大提高工作效率。下面来看云炫AI智剪如何进行MP4到FLV的转码&#xff…

轻量化的yolov8部署到安卓Android手机端

一、pytorch环境配置和yolov8源码安装 首先在电脑上需要配置好pytorch环境&#xff0c;和yolov8源码的下载 然后针对yolov8做自己的轻量化改进 二、下载Android Studio和ncnn-android-yolov8 1. Android Studio官网链接&#xff1a; 下载 Android Studio 和应用工具 - And…