Configuration of webpack from 0 to 1

Next, the configuration of webpack.prod.config.js

We compress the CSS code when we use the optimize-css-assets-webpack-plugin plug-in to package in a production environment
npm install optimize-css-assets-webpack-plugin --save-dev
webpack.prod.config.js is configured as follows, and mode is set to "production"

const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.config');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // Compressing css code

const prodWebpackConfig = merge(baseWebpackConfig, {
    mode: 'production',
    devtool: 'source-map', // The production environment can debug the source code on the browser, which is not recommended. This will expose the source code. Can be set to none
    optimization: {
      minimizer: [
        new OptimizeCSSAssetsPlugin({})   // Compress the css code, remove the blanks, and install it in the production environment
      ]
    },
  });
module.exports = prodWebpackConfig;

Now you can run NPM build
The generated dits file contains an additional file at the end of. map, because devtool:'source-map'is configured to debug the source code on the browser.
At the same time, open the css file, the css file is compressed and the space is removed.
Then try npm run dev and visit localhost:8080
npm run dev does not generate dist folders; it packages files on hard disks.

Last Knowledge Point Introduction

Generally, the company's projects will have a test environment and a formal environment. They belong to the production environment. The packaging commands are all built using NPM run. If there is an interface test environment in which parameters are passed "test" and a formal environment in which parameters are passed "prod", how can we judge whether it is a test environment or a formal environment?

Here you need to install a cross-env dependency
npm install cross-env --save-dev
Modify the scripts option of package.json file to change the previous build to build:test, build:prod

"scripts": {
    "build:test": "cross-env PROD_NAME=test webpack --config ./webpack/webpack.prod.config.js",
    "build:prod": "cross-env PROD_NAME=prod webpack --config ./webpack/webpack.prod.config.js",
    "dev": "webpack-dev-server --open webpack --config ./webpack/webpack.dev.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

After npm run build:test, process.env will have a new PROD_NAME attribute, which can be console.log in webpack.prod.config.js file.

const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.config');
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); // Compressing css code
+  console.log('welcome', process.env.PROD_NAME);
const prodWebpackConfig = merge(baseWebpackConfig, {
    mode: 'production',
    devtool: 'source-map', // The production environment can debug the source code on the browser, which is not recommended. This will expose the source code. Can be set to none
    optimization: {
      minimizer: [
        new OptimizeCSSAssetsPlugin({})   // Compress the css code, remove the blanks, and install it in the production environment
      ]
    },
  });
  module.exports = prodWebpackConfig;

You can see it in the terminal.

Execute npm run build:prod to see

But! PROD_NAME is defined by the cross-env plug-in, but it is not available in the file in src. You can try console.log(process.env.PROD_NAME) in main.js and print undefined.
In order to get process.env.PROD_NAME in the src source file, you need a plug-in Define Plugin, which does not need to be downloaded from the webpack.
webpack.prod.config.js file adds plugins configuration

const webpack = require('webpack');

const prodWebpackConfig = merge(baseWebpackConfig, {
    /**Code ellipsis...**/
    plugins: [
        new webpack.DefinePlugin({
          'process.env.PROD_NAME': JSON.stringify(process.env.PROD_NAME), // This plug-in is used to define variables that can be obtained from source files
        })
    ]
 });
 module.exports = prodWebpackConfig;

Modify main.js file

  const home_text = require('./home');
  import './assets/main.css';
  const text_p = document.getElementById('text-p');
+ text_p.innerHTML = process.env.PROD_NAME;

Execute npm run build:test and npm run build:prod, respectively. Open index.html under dist to see if they are test and prod.
Use different commands like this to package the test environment and the formal environment so that you can determine which environment is in your code.

The configuration of webpack from 0 to 1 ends here.

Keywords: Webpack npm JSON Attribute

Added by BLaZuRE on Tue, 23 Jul 2019 13:15:17 +0300

Programming VIP

Configuration of webpack from 0 to 1

Popular Keywords