亲测好用系列：package.json中常用的webpack插件以及作用

最新推荐文章于 2024-08-26 16:40:15 发布
最新推荐文章于 2024-08-26 16:40:15 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： webpack 前端 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/allan_l/article/details/85251602
版权
本文介绍了在package.json中如何使用webpack插件，如cross-env设置兼容性环境变量NODE_ENV，以及webpack-dev-server的实时监听、热替换等功能。通过NODE_ENV判断开发或生产环境，并利用webpack-dev-server的参数如--open、--inline、--hot等提高开发效率。
摘要由CSDN通过智能技术生成

  1. cross-env： 忽略跨平台，兼容windows和mac系统
  2. NODE_ENV:  是用户一个自定义的环境变量
  3. NODE_ENV的用法：在webpack.config.js中通过 process.env.NODE_ENV 判断生产环境或开发环境的依据的
  • process ：node.API  全局变量
  • process.env:  读取项目运行环境的配置
  1. webpack-dev-server: 
  • webpack的一个插件，替代webpack --watch 实时监听源码并并执行打包的作用。
  • 一般配置在npm run dev命令中，一旦发现源码发生了改变，就会根据entry的入口文件路径自动执行打包，但不会放在outptu的目录下，会存在内存当中，因为这样可以提高运行效率。
  • --open 打开浏览器

  • --inline选项会为入口页面添加“热加载”功能，--hot选项则开启“热替换（Hot Module Reloading）”，即尝试重新加载组件改变的部分（而不是重新加载整个页面）。如果两个参数都传入，当资源改变时，webpack-dev-server将会先尝试HRM（即热替换），如果失败则重新加载整个入口页面

最低0.47元/天 解锁文章
Allan_L
关注
专栏目录
构建json_开发插件package.json在webpack构建中的表现
weixin_32802111的博客
12-21 236
本文主要讲解开发插件时，package.json中main、module、browser字段填写与webpack构建的关系。测试环境准备首先我们准备好测试环境：|- demo |---- package-a |--------- browser.js |--------- module.js |--------- index.js |--------- pacakge.json |---- pac...
Webpack配置详解（package.json/webpack.config.js详细配置 ）
热门推荐
SeaSunExpect的博客
10-27 1万+
Webpack配置详解（package.json/webpack.config.js详细配置 ） webpack安装 package.json配置以及模块安装 webpack.config.js配置 开启webpack-dev-server服务 热替换插件的安装以及配置 开启自动打开浏览器插件的安装以及配置 加载器的安装以及配置 完整package.json/webpack.config.js文件
webpack中的package.json文件
nicecode
08-04 787
{ "name": "webpack_code", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core":
由浅入深package.json，发布一个优秀的npm包
最新发布
weixin_47339511的博客
08-26 1170
整篇文章大概会涉及到以下内容：package.json 中一些常用重要字段用途讲解，比如sideEffects、publishConfig、exports等;以及如何发布一个优秀的npm包
webpack.config.js，package.json
mhbsoft的博客
06-29 179
webpack.config.js // 定义项目根目录 const {resolve} = require('path'); // 引入html插件，使用模板，html压缩 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 提取单独css文件 替代 style-loader const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 压缩css const O
webpack在package.json的配置
qq_41865743的博客
03-09 255
1. 我们可以在packagejson的scripts中定义自己的执行脚本。通过npminit初始化，生成package.json，npm包管理的文件(暂时没有用上，后面才会用上)npm init2. package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。首先，会寻找本地的node_modules/.bin路径中对应的命令。如果没有找到，会去全局的环境变量中寻找执行我们的build指令
webpack学习系列(一)：package.json相关
xiashiqi_blog的博客
03-18 721
一、package.json属性说明 name - 包名. version - 包的版本号。 description - 包的描述。 homepage - 包的官网URL。 author - 包的作者，它的值是你在https://npmjs.org网站的有效账户名，遵循“账户名<邮件>”的规则，例如：zhangsan <zhangsan@1...
package.json：文件package.json的说明文档
02-03
在Node.js开发环境中，`package.json`是一个至关重要的文件，它用于管理项目的依赖关系、提供元数据以及定义项目的基本信息。这个文件是npm（Node.js Package Manager）和yarn（另一种流行的JavaScript包管理器）的...
一个webpack插件可以检查软件包版本，合并package.json，自动更新。 ：blue_car：：car：-JavaScript开发
05-26
一个webpack插件可以检查软件包版本，合并package.json，自动更新。 这是一个有趣的微型工具，可以查看您的软件包是否已过时，或将多个package.json组合在一起。 开始吧！ 安装n一个webpack插件可以检查软件包版本，...
面试官：听说你对package.json很熟？package.json百科全书 全网最全package.json介绍大全 v7版本全解
cuandeqin2083的博客
06-27 618
前言 平常在工作中，对package.json这个文件的接触非常非常少。 一些同学可能还会看一下script里面有什么命令，执行了哪些方法。 又或者了解一下dependencies和devDependencies 其他大部分的同学可能直接就npm i和npm start就开始工作了。 但是package.json的魅力远不止如此 今天就和我一起探索一下这个项目中不可或缺的——package.json吧！ 由浅入深-核心内容 准备工作 手摸手新建一个空的package.json n
webpack详细安装以及webpack.config.js配置，package.json配置
qq_48770086的博客
05-26 3136
webpack详细安装以及webpack.config.js配置，package.json配置
vue文件目录结构详解(二)---package.json,webpack配置，项目配置，项目依赖等
Harley567
02-09 706
package.json,webpack配置，项目配置，项目依赖等
webpack.config.js和package.json配置
qq_52135740的博客
07-09 423
webpack.config.js配置 入口 和出口 如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦。只需要将两个参数写到配置 中，就可以 解决。 const path = require('path') module.exports = { //入口：可以是字符串/数组/对象，这里我们入口只有一个，所有写一个字符串即可 entry:'./src/main.js', //打包入口路径 //出口：通常是一个对象，里面至少包含两个重要属性，path和fi
从0-1搭建一个web项目(package.json)详解
共同进步
06-27 885
本文主要对packge.json配置子文件详解ObJack-Admin一款基于 Vue3.3、TypeScript、Vite3、Pinia、Element-Plus 开源的后台管理框架。在一定程度上节省您的开发效率。另外本项目还封装了一些常用组件、hooks、指令、动态路由、按钮级别权限控制等功能。
[webpack-cli] Error: Unknown option ‘--hide-modules‘
Cheryl的加工厂
06-03 9497
执行npm run dev时，终端报错： [webpack-cli] Error: Unknown option '--hide-modules' 查看项目中安装的模块 npm ls --depth 0 发现原来是由于 laravel-mix@6.0.19 invalid版本与原项目的不匹配，导致webpack无法正常打包， 重新安装 npm install laravel-mix@2.1.14 再次执行npm run dev，打包成功！ ...
webpack和package.json常用到总结
qq_36434345的博客
10-20 2905
ES6 Moudule和 CommonJs区别 导出和引入的不一样 ES6 Moudule //导出 export default 模块名称 //引入 import 模块名称 from '文件路径' CommonJs //导出 module.export = 模块名称 //引入 const 模块名称 = require('文件路径') git命令行里的指令 //查看 webpack 是存在的...
webpack 配置
assassin_0302的博客
04-29 231
参考地址：https://segmentfault.com/a/1190000012536871#articleHeader1 01: 配置选项 Config options: --config 配置文件路径，字符串格式，默认是`根目录`下的 webpack.config.js 或 webpackfile.js， --config-name 使用配置的名字，字符串 -...
webpack打包过程
qq_45143649的博客
10-04 274
注意3：webpack-dev-server 根据配置，打包相关代码在内存当中，以 output.path 的值作为服务器根目录（所以可以直接自己拼接访问 dist 目录下内容）下面是基于webpack5，对整个打包流程进行梳理。可以配置webpack-dev-server快速开发应用程序，可以启动Web服务，自动检测代码变化，热更新到网页。webpack5 内置了资源模块（字体，图片等）打包，无需额外Loader，只需要简单配置即可处理图片资源。之前改代码，需要重新打包才能运行查看，效率很低。
vue-cli创建项目package.json中没有webpack‘版本
09-05
在最新版本的Vue CLI中，创建项目时的package.json文件中没有明确指定Webpack的版本号。这是因为Vue CLI使用了一种名为"webpack-merge"的工具，它能够智能地合并来自不同依赖包的Webpack配置。这样做的好处是能够...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值