关于webpack-cli4.0的相关配置（三）

最新推荐文章于 2022-08-03 16:34:30 发布
最新推荐文章于 2022-08-03 16:34:30 发布
阅读量312 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： webpack 文章标签： webpack vue.js npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45616003/article/details/124736664
本文介绍了如何在package.json中配置scripts，用于在开发（devbuild）和生产（build）环境中执行不同的任务。通过process.env.NODE_ENV可以判断当前环境，如'development'或'production'。同时，process.argv属性提供了命令行参数，可用于区分打包环境。在vue.config.js中，可以查看详细的配置信息，以实现环境特定的打包设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

配置多环境变量

package.json 里的 scripts 配置 dev build等，来执行不同环境

  1. 通过 npm run dev启动本地 , 执行 development
  2. 通过 npm run build 打包正式 , 执行 production

在这里插入图片描述

配置介绍

可以在vue.config.js里通过console.log(process)查看具体配置信息

常用的配置
  1. process.env.NODE_ENV
    会是 “development”、“production” 或 “test” 中的一个。具体的值取决于应用运行的模式
  2. process.argv
    属性返回一个数组，这个数组包含了启动Node.js进程时的命令行参数。可根据这个进行不同环境的打包
vue-cli4.0搭建
依古比古的博客
08-01 1712
vue.js越来越火爆.更多的项目vue进行开发,实际开发搭建开发脚手架. html css javascript node.js环境(npm包管理工具) webpack构建工具 webpack是一个静态资源构建，打包的工具 1.安装node.js 2.版本10.0.0以上 默认c盘 可下载淘宝镜像 比较稳定 也可以使用yarn 二:安装vue-cli脚手架构建工具 cnpm install -g @vue-cli 全局安装 vue -V查看版本 3.0为4.5.6 创建vue3.0项目 vue cre
Vue-CLI 4.0 build打包配置
weixin_43736435的博客
05-07 4834
module.exports = { // 公共路径(必须有的) publicPath: "./", // 输出文件目录 outputDir: "dist", // 静态资源存放的文件夹(相对于ouputDir) assetsDir: "assets", // eslint-loader 是否在保存的时候检查(果断不用，这玩意儿我都没装) ...
nodejs8.9.4(安装包)_npm_webpack_vue-cli安装详解.zip
06-27
nodejs8.9.4_npm_webpack_vue-cli安装详解 里面有详细的安装步骤
关于webpack-cli4.0的相关配置（二）
是大林的林吖-博客
05-11 638
注意：从cli3.0 开始，Webpack的配置文件从webpack.config.js变为了 vue.config.js 更多配置信息参考地址 （1）publicPath Type：string Default： ‘/’ 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，则设
开发必备的webpack4
weixin_33735077的博客
05-14 242
首先webpack4建议使用node版本在8.5以上，是因为要兼容新版npm下的npx，cmd中node -v查看node版本。 1.什么是webpack WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 构建就是把源代码转换成发布到...
关于webpack-cli4.0版本所带来的问题
hong
04-18 327
问题所在 在webpack-cli4.0版本中，使用webpack-dev-server会导致服务启动错误 解决方法 webpack-cli退回到3.0版本 npm install webpack-cli@3 --save-dev 其他webpack、webpack-dev-server用最新版本即可 出现原因 webpack-cli4.0版本中，移除了yargs包，导致在最新版本中不能使用webpack-cli ...
webpack-cli4 启动webpack-dev-server报错
hetingtingitsme的博客
05-05 2058
package.json 配置 "webpack": "^5.36.2", "webpack-cli": "^4.6.0", "webpack-dev-server": "^3.11.2" 当webpack-cli为4以上版本时，我们启动webpack-dev-server时，按照以往经验配置如下： "start": "webpack-dev-server" 报错如图： 需要将scripts脚本里面的webpack-dev-server 改为webpack serve --open，
【JavaScript源代码】vue项目配置 webpack-obfuscator 进行代码加密混淆的实现.docx
12-29
对于Vue CLI 2.x，你需要在`webpack.prod.conf.js`文件中配置`webpack-obfuscator`。 **使用**： 完成配置后，你可以通过运行`npm run build`命令来构建你的项目。这将会使用`webpack-obfuscator`对输出的...
vue-cli4.0 配置CDN加速
mrhaoxiaojun的博客
09-10 1903
vue.config.js 出于对网站性能的要求，有时候我们不希望一些比较大的第三方库直接打包到最后的bundle中，而会选择在打包的时候忽略他们，并直接使用CDN上面的资源。 以下是vue-cli4的相关配置vue.config.js cdn.config.js module.exports = assetsCDN = { useCDN: false, // webpack build externals externals: { vue: 'Vue', 'vue-router
Vue-CLI 4.0配置CDN的方法
xinyuandu的博客
10-23 1763
Vue-CLI 4.0配置CDN的方法 之前试过了很多搭配cdn的方法，他们说的也都是对的，但是在自己的项目中确实没有办法执行，总是会报错，因此总结了一下我搭配cdn的所有流程，希望有所帮助 创建vue.config.js 创建vue.config.js ，文件的目录层级是雨src文件夹同级别的，因为vue-cli在4.0中取消了关于webpack等插件的配置，但是在本身也集成了这些插件，因此可以通过这样的一个文件去对整体的内容进行配置。 找到CDN的路径 如果要引用cdn，首先还是要找到CDN路径，这个是
webpack5+webpack-cli4
weixin_47330492的博客
05-14 1120
webpack5+webpack-cli4基础搭建 我用到的版本webpack: "5.72.1，webpack-cli:“4.9.2” 安装webpack+webpack-cli npm install webpack webpack-cli 在文件夹中创建webpack.config.js. 其实webpack5把entry和output自动封装只需要配置devServer就好了，配置内容如下 module.exports={ //entry自动封装在src文件下的index.js，output封装
webpack4 源码分析(二) webpack-cli
林中路
04-21 2743
webpack4 源码分析(二) webpack-cli 上一篇我们分析了webpack4的入口，发现最后都是调用了 webpack-cli 这个工具包，本篇将对这个工具包里进一步发生的事情进行分析。 cli.js 这是webpack-cli 的入口文件，我们来看下它的基本结构 (function (){ const importLocal = require("import-local");...
webpack4.xx使用
buyue
07-14 706
假设已安装npm 全局安装webpack npm i -g webpack 到你的npm的目录的bin目录可以看到多了一个webpack 使用软连接 ln -s /node-v8.11.3-linux-x64/bin/webpack /usr/local/bin/webpack 至此可以使用webpack命令 如打包show.js到dist.js，使用 webpack sh...
webpack4配置新手教程
bob的博客
08-05 672
1.初始化项目 先创建一个webpackDemo文件夹，切换进去执行如下命令， npm install --save-dev webpack-cli@4.4.0 2.基本概念 1. 入口(entry) Webpack 执行构建的第一步将从 Entry 开始，可理解为输入。 2. 输出(output）输出结果，在 Webpack 经过一系列处理后输出的配置 3. loader （模块转换器） 4. 插件(plugins) 扩展插件，在 Webpack对文件处理的扩展处理 3.配置webp
webpack4.x入门
qq_37322278的博客
05-01 1117
Webpack4webapck概念本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 一、webapck的安装:1. npm instasll web...
webpack4+vue-cli构建vue项目
成长笔记
04-18 3112
1.安装node js 第一步检测是否安装node；没有安装node的同学请到官网下载安装https://nodejs.org/en/download/ 安装成功后在命令行查看node版本，如果有说明安装成功。 node -v 2.利用淘宝npm镜像安装相关依赖 npm install -g cnpm--registry=https://registry.npm.taobao.org ...
webpack和vue cli 4.4.4的概念理解及搭建
yanhua1575的博客
06-14 2806
1.webpack 1.1概念 官方文档解释： At its core, webpack is a static module bundler for modern JavaScript applications. 从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。 从模块和打包的概念上理解就是： webpack中的模块化 webpack其中一个核心就是模块化开发，并且处理模块间的依赖关系。不仅仅是JavaScript文件，CSS、图片、json文件等等在webpack中
webpack@4的基础入门学习笔记
Maui1027的博客
08-03 398
使用webpack 的内置插件 DefinePlugin来配置变量//开发环境 plugins : [ new DefinePlugin({IS_DEV : 'true' }) ] , //生产环境 plugins : [ new DefinePlugin({在 src目录中可以全局访问这个变量。
webpack4.x安装和配置
weixin_30435261的博客
04-11 286
一、全局安装webpack npm install webpack -g 二、创建项目 我们在合适位置新建一个文件夹wpk-test，用于存放我们的项目。命令行中定位到webpack-test文件夹下，输入以下命令进行项目的初始化： npm init 这里，要求设置很多选项，可以按项目情况配置也可以不填直接回车。完成后，我们发现文件夹中增加了package.json文件，它用于保存关...
vue-cli4.0快速搭建项目教程
总结来说，使用vue-cli4.0搭建Vue.js项目是一个便捷且灵活的过程，它允许开发者根据项目需求定制配置，提高了开发效率。通过升级本地环境和理解配置选项，开发者可以顺利地创建并管理Vue.js项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值