javascript - 如何使用 dotenv (.env) 自动将 NODE_ENV 从开发更改为生产
问题描述
大家好,我有一个简单的问题,我正在使用 webpack 4 构建一个简单的应用程序
我正在尝试使用dotenv包自动更改NODE_ENV变量
我使用了很多技巧来做到这一点,但没有任何效果。
请帮忙谢谢...
这是我所有的配置文件请帮助大家谢谢
webpack.config.js
"use strict";
// Libraries
const path = require('path')
const webpack = require('webpack')
require('dotenv').config()
// Plugin(s)
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
// Configuration
const isDevMode = process.env.NODE_ENV !== 'production'
module.exports = {
mode: process.env.NODE_ENV,
context: path.resolve(__dirname, '../src'),
entry: {
app: [
'../src/resources/assets/js/app.js',
'../src/resources/assets/sass/app.scss'
]
},
output: {
path: path.resolve(process.cwd(), 'public/dist/.vuxt'),
filename: 'assets/js/[name].bundle.js',
chunkFilename: 'assets/js/[id].bundle.js'
},
devtool: 'source-map',
devServer: {
contentBase: path.resolve(__dirname, '../public'),
watchContentBase: true,
compress: true,
host: process.env.APP_HOST,
port: process.env.APP_PORT
},
resolve: {
modules: [
'node_modules',
path.resolve(__dirname, '../src')
],
extensions: ['.*', 'json', '.js', '.jsx', '.ts', '.tsx', '.css', '.scss'],
alias: {}
},
module: {
rules: [
{
test: [/.js$|.jsx$|.ts$|.tsx$/],
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
cwd: __dirname,
presets: ['@babel/preset-env', '@babel/typescript']
}
}
},
{
test: /\.html$/,
use: ['ejs-loader', 'extract-loader', 'html-loader']
},
{
test: [/.css$|.scss$/],
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
reloadAll: true
}
},
{
loader: 'css-loader',
options: { sourceMap: true }
},
{
loader: 'postcss-loader',
options: { sourceMap: true }
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
]
},
{
test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[hash].[ext]',
outputPath: 'assets/images/'
}
}
]
},
{
test: /\.((woff2?|svg)(\?v=[0-9]\.[0-9]\.[0-9]))|(woff2?|svg|jpe?g|png|gif|ico)$/,
use: ['url-loader?limit=10000']
}
]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
uglifyOptions: {
compress: false,
ecma: 6,
mangle: true
},
sourceMap: true
}),
new TerserJSPlugin({
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {},
mangle: true,
module: false,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_classnames: undefined,
keep_fnames: false,
safari10: false,
}
}),
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
}
})
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
hash: true,
inject: true,
minify: {
collapseWhitespace: true,
removeComments: true,
removeRedundantAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
useShortDoctype: true
},
title: process.env.APP_NAME,
meta: {
viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
'theme-color': '#0000'
},
favicon: '../src/resources/assets/images/favicon.png',
template: path.resolve(__dirname, '../src/resources/views/index.html')
}),
new MiniCssExtractPlugin({
filename: isDevMode ? 'assets/css/[name].css' : 'assets/css/[name].[hash].css',
chunkFilename: isDevMode ? 'assets/css/[id].css' : 'assets/css/[id].[hash].css',
})
]
};
.env
NODE_ENV=production
应用程序.js
console.log('You are in ', process.env.NODE_ENV, 'Mode')
包.json
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node node_modules/webpack/bin/webpack.js --progress --hide-modules --config webpack/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production webpack -p --no-progress --hide-modules --config webpack/webpack.config.js",
"serve": "npm run start",
"start": "cross-env NODE_ENV=development node node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --open --config webpack/webpack.config.js"
}
解决方案
您可以尝试在启动应用程序时通过命令行传递 env 值。示例:npm start env=production
推荐阅读
- c# - 有没有办法使用 C# 中的 MailMessage 或任何类似的方法来设置电子邮件个人资料图片?
- php - 弹出显示数据库中的条目列表,以便在按下编辑按钮时从中选择
- azure - 容器如何~读取~存储在(安装的)秘密卷中的秘密?
- unity3d - 脚本不适用于多个相同的对象
- android - Coroutines:在特定的 CoroutineContext 上运行 Deferred
- r - 获取数据框中每一行的升序列名列表
- asp.net-core - .NET Core 新的 SelectList 返回 null
- python-3.x - 如何创建多个 Python 脚本并同时运行它们?
- c# - 如何使用 EditText 字段(纯文本)的输入在服务器上编写/创建文本文件?
- redux - 为什么 rxjs 史诗不起作用?