zoukankan      html  css  js  c++  java
  • webpack中环境变量的使用方法

    这节课讲解一下,在webpack打包过程中,怎么去使用一些环境变量。
    首先我有一个打包配置的三个文件
    "scripts": {
      "dev-build": "webpack --profile --json > stats.json --config ./build/webpack.dev.js",
      "dev": "webpack-dev-server --config ./build/webpack.dev.js",
      "build": "webpack --config ./build/webpack.prod.js"
    },

    对应三个命令,分别是开发环境的一个命令 npm run dev。打包生成开发环境代码的命令 npm run dev-build。以及线上代码生成的一个命令 npm run build。现在我要借助两个配置文件来帮助我们去完成对应的打包,分别是dev对应配置文件和prod对应的配置文件。现在我可以通过另外一种形式来对代码进行一次变更。

    webpack.dev.js
    const webpack = require('webpack');
    const merge = require('webpack-merge');
    const commonConfig = require('./webpack.common.js');
    
    
    const devConfig = {  
      mode: 'development',
      devtool: 'cheap-module-eval-source-map',
      devServer: {
        contentBase:'./dist',
        open:true,
        hot: true
      },
      plugins: [
        new webpack.HotModuleReplacementPlugin()
      ],
      output: {
        filename: '[name].js',
        chunkFilename: '[name].chunk.js',
      }
    }
    module.exports = merge(commonConfig, devConfig);

    这是dev配置原始文件,其中引入了merge和commonConfig。现在我把他删掉,直接导出devConfig

    webpack.dev.js
    const webpack = require('webpack');
    const devConfig = {
    }
    module.exports = devConfig;
    prod也做同样的处理,这样我导出的就不是融合过后的文件。而是自己独立的配置文件。接着我们打开webpack.common.js,去引入merge,dev和prod
    webpack.common.js
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const CleanWebpackPlugin = require('clean-webpack-plugin');
    const webpack = require('webpack');
    const merge = require('webpack-merge');
    const devConfig = require('./webpack.dev');
    const prodConfig = require('./webpack.prod');
    
    
    const commonConfig = {
    }
    
    
    module.exports = (env) => {
      // 如果有这个全局变量,且是线上环境,否则是开发环境
      if(env && env.production) {
        return merge(commonConfig, prodConfig);
      } else {
        return merge(commonConfig, devConfig);
      }
    }

    以前我们导出一个对象,这里我们导出一个函数,接收一个全局变量,怎么融合取决于传递进来的变量。是否有全局变量,是哪个环境决定

    package.json

    "scripts": {
      "dev-build": "webpack --profile --json > stats.json --config ./build/webpack.common.js",
      "dev": "webpack-dev-server --config ./build/webpack.common.js",
      "build": "webpack --env.production --config ./build/webpack.common.js"
    },

    package.json里面走的都是webpack.common.js了。在build里面加入--env.production。其他不加默认走devConfig。各自运行。没问题。这样就不是通过不同的文件,而是都是走common,通过变量控制

  • 相关阅读:
    rsync使用
    文件系统、mkdir、touch、nano、cp笔记
    man/ls/clock/date/echo笔记
    Python之路,Day2
    Python之路,Day1
    自动化部署nginx负载均衡及监控短信报警
    NO.11天作业
    Tiny C Compiler简介-wiki
    stm32中使用cubemx配置freertos的信号量大小
    c99的新功能
  • 原文地址:https://www.cnblogs.com/wzndkj/p/10852868.html
Copyright © 2011-2022 走看看