[Node] Node.js Webpack常见的模式

简介: [Node] Node.js Webpack常见的模式

一、认识插件 Plugin

认识Plugin

Webpack的另一个核心是Plugin 官方有这样一段话对Plugin的描述


While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization,asset management and injection of environment variables


翻译过来就是:


loader是用来 特性的模块类型 进行转换


Plugin是可以用于 执行更加广泛的任务 如 打包优化 资源管理 环境变量注入等

c4efef8861964cfe83bb32a2045976f3.png

二、CleanWebpackPlugin

我们每次修改一些配置 重新打包时 都需要手动删除 dist文件夹


可以借助这个插件来帮助我们完成


首先 安装这个插件

JavaScript

npm install clean-webpack-plugin -D


之后在插件中配置

JavaScript
const  {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
    // 其他省略 ...
    plugins:[
        new CleanWebpackPlugin()
    ]
}

三、HtmlWebpackPlugin

另外还有一个不太规范的地方:


我们的HTML文件是编写在根目录的,最终打包的dist文件夹中没有index.html文件的


在进行项目部署时 必须也是需要有对应的入口文件index.html


所以我们也需要对index.html进行打包管理


对HTML进行打饱处理 可以使用另一个插件 HtmlWebpackPlugin

JavaScript
npm install html-webpack-plugin -D
JavaScript
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // 其他省略 ...
    plugins:[
        new HtmlWebpackPlugin({
            title:"电商项目"
        })
    ]
}

生成index.html分析

自动在dist文件中 生成了一个index.html文件


该文件中也自动添加了我们打包的js文件


这个文件是如何生成的?


默认情况下根据ejs的一个模块来生成的


在html-webpack-plugin的源码中,有一个defaults_index.ejs模块

自定义HTML模版

如果我们想在自己的模块中加入一些比较特别的内容:


如添加一个 noscript标签 在用户的JS被关闭时 给予响应的提示


如在开发vue或react项目时 需要一个可以挂在后续组件的跟标签

自定义模版数据填充

在配置HtmlWebpackPlugin时 我们可以添加如下配置


Temolate: 指定我们曜使用的模块所在的路径


title:在进行HtmlWebpackPlugin.options.title读取时 就会读到该信息

四、DefinePlugin

DefinePlugin的介绍

这个时候编译还会报错 因为我们的模块中还是用到一个 BASE_URL的常量:

5392d946e4974486be5e060e9a5d973a.png

这是因为在编译 template模块时 有一个 BASE_URL:

<link rel="icon" href="<%=BASE_URL %">favicon.ico">

但是我们并没有设置过这歌常量值,所以会出现没有定义的错误


这个时候我们可以使用DefinePlugin插件;


DefinePlugin的使用


DefinePlugin允许在编译时创建配置的全局常量 是一个webpack内置的插件(不需要单独安装):

JavaScript
const {DefinePlugin} = require('webpack')
module.exports = {
    // 其他省略
    plugins:[
        new DefinePlugin({
            BASE_URL:'"./"'
        })
    ]
}

五、Mode模式配置

Mode配置

Mode配置选项 可以告知webpack使用相应模式的内置优化


默认值是production(什么都不设置的情况下)


可选值有:

'none'|'development'|'production'

4dcf8e787939415caccab8e457040fa0.png

相关文章
|
3月前
|
存储 安全 JavaScript
云计算浪潮中的网络安全之舵探索Node.js中的异步编程模式
【8月更文挑战第27天】在数字化时代的风帆下,云计算如同一片广阔的海洋,承载着企业与个人的数据梦想。然而,这片海洋并非总是风平浪静。随着网络攻击的波涛汹涌,如何确保航行的安全成为了每一个船员必须面对的挑战。本文将探索云计算环境下的网络安全策略,从云服务的本质出发,深入信息安全的核心,揭示如何在云海中找到安全的灯塔。
|
7天前
|
开发框架 JavaScript 前端开发
Node.js日记:客户端和服务端介绍、Node.js介绍
Node.js日记:客户端和服务端介绍、Node.js介绍
|
26天前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
42 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
12天前
|
JavaScript 前端开发 开发工具
Node.js——初识Node.js
Node.js——初识Node.js
15 4
|
13天前
|
前端开发 JavaScript UED
探索JavaScript中的异步编程模式
【10月更文挑战第21天】在数字时代的浪潮中,JavaScript作为一门动态的、解释型的编程语言,以其卓越的灵活性和强大的功能在Web开发领域扮演着举足轻重的角色。本篇文章旨在深入探讨JavaScript中的异步编程模式,揭示其背后的原理和实践方法。通过分析回调函数、Promise对象以及async/await语法糖等关键技术点,我们将一同揭开JavaScript异步编程的神秘面纱,领略其带来的非阻塞I/O操作的魅力。让我们跟随代码的步伐,开启一场关于时间、性能与用户体验的奇妙之旅。
|
29天前
|
JavaScript 前端开发 API
探索Node.js中的异步编程模式
【10月更文挑战第4天】在JavaScript的世界中,异步编程是提升应用性能和用户体验的关键。本文将深入探讨Node.js中异步编程的几种模式,包括回调函数、Promises、async/await,并分享如何有效利用这些模式来构建高性能的后端服务。
|
1月前
|
JavaScript 前端开发 调度
探索Node.js中的异步编程模式
在Node.js的世界里,异步编程是核心。本文将带你深入了解异步编程的精髓,通过代码示例和实际案例分析,我们将一起掌握事件循环、回调函数、Promises以及async/await等关键概念。准备好迎接挑战,让你的Node.js应用飞起来!
|
1月前
|
JavaScript 前端开发 开发者
探索Node.js中的异步编程模式
【9月更文挑战第33天】在JavaScript的后端领域,Node.js凭借其非阻塞I/O和事件驱动的特性,成为高性能应用的首选平台。本文将深入浅出地探讨Node.js中异步编程的核心概念、Promise对象、Async/Await语法以及它们如何优化后端开发的效率和性能。
25 7
|
21天前
|
缓存 监控 JavaScript
Node.js中基于node-schedule实现定时任务之详解
Node.js中基于node-schedule实现定时任务之详解
67 0
|
2月前
|
JavaScript 前端开发 开发者
探索Node.js中的异步编程模式
【9月更文挑战第15天】在Node.js的世界中,“一切皆异步”不仅是一句口号,更是其设计哲学的核心。本文将带你深入理解Node.js中异步编程的几种主要模式,包括经典的回调函数、强大的Promise对象、以及简洁的async/await结构。我们将通过实例代码来展示每种模式的使用方式和优缺点,帮助你更好地掌握Node.js异步编程的精髓。无论你是Node.js新手还是有一定经验的开发者,这篇文章都能给你带来新的启示和思考。让我们一起开启Node.js异步编程的探索之旅吧!