[译]webpack官网文档 :指南 -- 19.使用环境变量

本文介绍如何通过环境变量区分Webpack开发与生产配置,利用process.env读取环境变量,并通过cross-env包设置跨平台环境变量。

原创翻译,转载请注明出处。

原文地址:https://webpack.js.org/guides/environment-variables/

 

你可以使用环境变量,来消除webpack.config.js中开发编译和正式产品编译之间的设定差异。可以利用Node.js模块里的标准访问方式:在运行webpack时设定一个环境变量,使用process.env来指向变量。变量NODE_ENV是常用的事实上的标准。

webpack.config.js

module.exports = {
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
+      compress: process.env.NODE_ENV === 'production'
    })
  ]
};

 

使用cross-env包来设定平台有效的环境变量:

package.json

{
  "scripts":{
    "build":"cross-env NODE_ENV=production PLATFORM=web webpack"
  }
}

 

参考

 https://blog.flennik.com/the-fine-art-of-the-webpack-2-config-dc4d19d7f172#.297u8iuz1

 

-- End --

React工程化的项目搭建 错误监控 这种监控可以帮助开发人员及时发现和解决问题,提高应用程序的稳定性和可靠性。 Sentry:Sentry是一款开源的错误监控平台,可以监控前端、后端以及移动端应用程序中的错误和异常。Sentry提供了实时错误报告、错误分析和错误解决方案等功能。 Bugsnag:Bugsnag是一款专门用于监控Web应用程序和移动应用程序的错误监控工具。它可以捕获JavaScript异常、网络请求错误、客户端错误等。 Google Analytics:Google Analytics可以监控网站的访问量、页面浏览量、访问时长和用户行为等。它还提供了实时报告和错误报告等功能,可以帮助开发人员发现和解决问题。 Performance API:Performance API是一个浏览器提供的API,可以监控Web应用程序的性能。它可以捕获页面加载时间、资源下载时间和JavaScript执行时间等信息。 前端错误监控SDK:很多前端错误监控工具都提供了JavaScript SDK,可以通过在应用程序中引入SDK来捕获错误和异常。开发人员可以根据捕获的错误信息来定位和解决问题。 脚手架开局 create-react-app webpack创建 初始化项目空间 安装webpack和react相关依赖文件 在src目录配置index.js文件 在src目录配置index.html文件 配置config中webpack配置文件 新建webpack.base.conf.js文件,部分代码仅供参考 新建webpack.deve.conf.js文件,部分代码仅供参考 新建webpack.prod.conf.js文件 新建.babelrc文件 修改package.json中的script代码 package.json中部分代码如下 在项目中添加代码规范检测 新增如下文件(用于规范项目组代码) .eslintrc.js文件 .eslintignore文件 .prettierrc.js文件 .prettierignore文件 .prettierignore文件 JavaScript 运行代码 复制代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 **/*.svg package.json .umi .umi-production /dist .dockerignore .DS_Store .eslintignore *.png *.toml docker .editorconfig Dockerfile* .gitignore .prettierignore LICENSE .eslintcache *.lock yarn-error.log .history 替换package.json中命令 启动命令 JavaScript 运行代码 复制代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 "scripts": { "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier", "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ", "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style", "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src", "lint:prettier": "prettier --check \"src/**/*\" --end-of-line auto", "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less", "prettier": "prettier -c --write \"src/**/*\"", "precommit": "lint-staged", "precommit:fix": "npm run lint:fix && npm run prettier && npm run lint:prettier && npm run lint:style", "dev": "webpack-dev-server --hot --config config/webpack.dev.conf.js", "start": "npm run dev", "build": "webpack --progress --config config/webpack.prod.conf.js" }, 安装cross-env(运行跨平台设置和使用环境变量的脚本) cross-env:运行跨平台设置和使用环境变量的脚本 JavaScript 运行代码 复制代码 1 2 3 4 5 6 7 1、安装:npm install --save-dev cross-env 2、修改启动命令(原命令前加上 cross-env APP_ENV=development 环境变量): "start:dev": "cross-env APP_ENV=development webpack serve --config webpack.development.js", "testing": "cross-env APP_ENV=testing webpack --config webpack.testing.js", "build": "cross-env APP_ENV=production webpack --config webpack.production.js", "preBuild": "cross-env APP_ENV=preProduction webpack --config webpack.production.js", 3、读取环境变量:process.env.APP_ENV 添加提交前检测 配置husky JavaScript 运行代码 复制代码 1 2 #使用husky lint-staged在commit的时候校检你提交的代码是否符合规范 yarn add husky lint-staged -D package.json新增如下代码 package.json代码新增husky JavaScript 运行代码 复制代码 1 2 3 4 5 6 7 8 9 10 11 12 "lint-staged": { "**/*.less": "stylelint--syntaxless", "**/*.{js,jsx,ts,tsx}": "npmrunlint-staged:js", "**/*.{js,jsx,tsx,ts,less,md,json}": [ "prettier--write" ] }, "husky": { "hooks": { "pre-commit": "npmrunlint-staged" } } 把这篇技术文章整理成markerdown代码风格 我copy复制出来
08-23
npm run dev > vue-xuadmin@1.2.8 dev > cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js [hardsource:c12e8466] Using 0 MB of disk space. [hardsource:c12e8466] Writing new cache c12e8466... i 「wds」: Project is running at http://localhost:8081/ i 「wds」: webpack output is served from / i 「wds」: 404s will fallback to /index.html [hardsource:c12e8466] Tracking node dependencies with: package-lock.json, yarn.lock. 10% building 0/1 modules 1 active ...81 F:\工作项目\vue-xuAdmin-master\node_modules\webpack\hot\dev-server.js ./src/main10% building 1/3 modules 2 active F:\工作项目\vue-xuAdmin-master\node_modules\webpack\hot\dev-server.jsnode:internal/crypto/hash:69 this[kHandle] = new _Hash(algorithm, xofLen); ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:69:19) at Object.createHash (node:crypto:133:10) at module.exports (F:\工作项目\vue-xuAdmin-master\node_modules\webpack\lib\util\createHash.js:135:53) at NormalModule._initBuildHash (F:\工作项目\vue-xuAdmin-master\node_modules\webpack\lib\NormalModule.js:417:16) at handleParseError (F:\工作项目\vue-xuAdmin-master\node_modules\webpack\lib\NormalModule.js:471:10) at F:\工作项目\vue-xuAdmin-master\node_modules\webpack\lib\NormalModule.js:503:5 at F:\工作项目\vue-xuAdmin-master\node_modules\webpack\lib\NormalModule.js:358:12 at F:\工作项目\vue-xuAdmin-master\node_modules\loader-runner\lib\LoaderRunner.js:373:3 at iterateNormalLoaders (F:\工作项目\vue-xuAdmin-master\node_modules\loader-runner\lib\LoaderRunner.js:214:10) at Array.<anonymous> (F:\工作项目\vue-xuAdmin-master\node_modules\loader-runner\lib\LoaderRunner.js:205:4) at Storage.finished (F:\工作项目\vue-xuAdmin-master\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16) at F:\工作项目\vue-xuAdmin-master\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9 at F:\工作项目\vue-xuAdmin-master\node_modules\graceful-fs\graceful-fs.js:115:16 at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } Node.js v18.18.2
10-30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值