preface

Today we’ll take a look at Webpack configuration environment variables, so what do environment variables do? We all encounter this scenario in development projects, distinguishing between development environment, production environment, and test environment, and requesting different apis for each scenario. Here’s how to configure environment variables in a project.

Configuration method

Set or Export

One of the tricky things about this approach is that Windows and MAC use it differently, and you have to change the code to start the project on different systems, which is a little bit uncomfortable, so let’s take a look at that.

package.json

For Windows, do as follows

{
  "scripts": {
    "dev": "set NODE_ENV=dev && node index.js"}}Copy the code

The MAC system is configured as follows

{
  "scripts": {
    "dev": "export NODE_ENV=dev && node index.js"}}Copy the code

The effect

Webpack. Config. Js file

console.log(process.env.NODE_ENV) // dev
Copy the code

If you were to configure it on Windows and boot it on a MAC, it would be a problem, and we’d have to change it manually, and it would be very tedious.

Cross-env

This plug-in solves the problem mentioned above (different systems use different configurations). It is called “cross-platform environment variables”, which is a set of code compatible with both ends. Now let’s do an example

The installation

npm i cross-env -D
Copy the code

Configure it in package.json under the project

{
  "scripts": {
    "dev:serve": "set NODE_ENV=baidu.com && npx webpack-dev-server --config=./config/webpack.config.js",}}Copy the code

webpack.config.js

console.log(process.env.NODE_ENV) // baidu.com
Copy the code

The problem with this is that although our environment variables are configured, they can only be used in webpack.config.js. Let’s go to main.js and print it out.

main.js

console.log(process.env.NODE_ENV) // undefined
Copy the code

Above the main. Js can be seen clearly, print the result is undefined, this is why, because the current environment variables, only in the node environment effect, in the browser did not, so the main js to get inside is undefined.

There are pitfalls

webpack.config.js

console.log(process.env.NODE_ENV) // baidu.com
module.exports = {
	mode: "development"
}
Copy the code

main.js

console.log(process.env.NODE_ENV) // development
Copy the code

NODE_ENV is in webpack mode, and is used in webpack mode.

  • Webpack-dev-server defaults to –mode=development
  • Webpack defaults to –mode=production

Pay attention to the pits here to avoid mistakes.

Returning to the topic, the cross-env environment variable can only be used in a Node environment, so how can it be used in a browser environment? With the built-in plug-in global variables provided by Webpack, let’s configure them.

webpack.config.js

console.log(process.env.NODE_ENV) // baidu.com
const webpack = require("webpack")
module.exports = {
	mode: "development".plugins: [
        new webpack.DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV)
        })
    ]
}
Copy the code

main.js

console.log(process.env.NODE_ENV) // baidu.com
Copy the code

The cross-env global has been overridden by the mode global. Json. stringify prevents parsing into a variable. You can now use environment variables freely in global projects.

I’m frogman. I’ll see you next time.

Thank you

Thank you for reading this article. I hope it will be helpful to you. If you have any questions, please point out.

I’m frogman (✿◡ smoker), thumbs up if you think it’s ok ❤.

Interested partners can join [front end entertainment exchange group] welcome to exchange and discuss

Writing is not easy, “like” + “watching” + “forward” Thanks for your support ❤

Past oliver

Using decorators in Vue projects

Share 15 useful Webpack plugins!!

“How to write a Vue component to publish to NPM and import it for use outside chain”

12 Loaders used in Webpack

CommonJs and Es Module and the difference between them

Do you know all these JavaScript tips for your job?

[Suggested Collection] Share some common Git commands in work and how to solve special problem scenarios