Hello Guys I have a simple question I'm using webpack 4 to build a simple application
I'm trying to change the NODE_ENV variable automatically by using the dotenv package
I use many tricks to do this but nothing works.
please some help thank you...
this is my all config file please help guys thank you
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
app.js
console.log('You are in ', process.env.NODE_ENV, 'Mode')
package.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"
}
you can try passing env value via command line while starting the app. example: npm start env=production
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.