How do you distinguish a development environment from a build environment

The previous chapter covered the use of devtool, but the official recommendation is to use different configurations for different environments, so how to distinguish the current running environment, this time will cover this.

Install dependencies

$ yarn add -D webpack-merge
Copy the code

Adjusting the directory structure

Add the config folder, move the webpack.config.js file into it, keep the basic configuration, and remove the mode and devtool properties

Add webpack.conf.dev.js to the config folder and write the following

const merge = require('webpack-merge');
const common = require('./webpack.config.js');
let devConfig = {
    mode: "development".devtool: 'source-map'};module.exports = merge.merge(common, devConfig);
Copy the code

Modify the package. The json

 "scripts": {
    "start": "webpack serve --config config/webpack.conf.dev.js"
  },
Copy the code

Perform yarn start

The last

Create different webpack.conf.xxx.js for different environments

Note modifying the file reference path in webconfig.conf.js because its location has changed

Get the code