动手写webpack配置--10.使用环境变量。

基于Webpack4.x + npm6.5 + node v10.10.0 +react+ vscode环境.

项目名webpackDemo；

之前都是在学习一些webpack的四个核心的使用：

 entry: 入口 ，output:输出,loaders加载器plugin插件。

本节学习环境变量的使有和，因为在开发当中有好多环境，不同的环境可能需求或配置信息也不同。这个时候环境变量就能显出威力了。

webpack中有两种方式来设置环境变量。

1，设置系统级环境变量的方式。

2，设置入参式环境变量的方式。

 

修改webpack.config.js

'use strict';

...

console.log(process.env);

...

module.exports = {
    ...
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        overlay: true,
        hot: true,
        inline: true,
        // quiet: true
        stats: "none"
    }
}

在devServer中设置stats或quiet目的是过滤掉某些相关输出信息。

加上console.log(process.env); 目的是查看一下目前有那些环境变量信息和值。

package.json

...
  "scripts": {
    "start": "webpack",
    "dev": "webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

运行npm run dev

AdeMacBook-Pro-3:webpackdemo a$ npm run dev

> webpackdemo@1.0.0 dev /Users/a/Documents/reactNative/reactstudy/webpackdemo
> webpack-dev-server

{ npm_config_save_dev: '',
  npm_config_legacy_bundling: '',
  npm_config_dry_run: '',
  NVM_RC_VERSION: '',
  npm_config_viewer: 'man',
  npm_config_only: '',
  ...
  TERM_PROGRAM: 'vscode',
  NODE: '/usr/local/Cellar/node/10.7.0/bin/node',
  npm_config_usage: '',
  npm_config_audit: 'true',
  npm_package_devDependencies_file_loader: '^3.0.1',
  INIT_CWD: '/Users/a/Documents/reactNative/reactstudy/webpackdemo',
  ANDROID_HOME: '/Users/a/Library/Android/sdk',
  NVM_CD_FLAGS: '',
  npm_config_globalignorefile: '/usr/local/Cellar/node/10.7.0/etc/npmignore',
  SHELL: '/bin/bash',
  TERM: 'xterm-256color',
  ...
  TMPDIR: '/var/folders/wl/rclr8zjs1_b4swn5n62kn3sr0000gn/T/',
  ...
  TERM_PROGRAM_VERSION: '1.31.1',
  ...
  npm_package_devDependencies_webpack_cli: '^3.2.3',
  npm_package_license: 'ISC',
  CLASS_PATH:
   '/Library/Java/JavaVirtualMachines/jdk1.8.0_181.jdk/Contents/Home/lib',
  COMMAND_MODE: 'unix2003',
  ...
  npm_config_cache_lock_retries: '10',
  RN: '/usr/local/Cellar/node/10.7.0/bin',
  ...
  npm_config_allow_same_version: '',
  npm_config_https_proxy: '',
  npm_config_engine_strict: '',
  npm_config_description: 'true',
  _:
   '/Users/a/Documents/reactNative/reactstudy/webpackdemo/node_modules/.bin/webpack-dev-server',
  ...
  JAVA_HOME:
   '/Library/Java/JavaVirtualMachines/jdk1.8.0_181.jdk/Contents/Home',
  ...
  npm_config_fetch_retry_maxtimeout: '60000',
  ...
  npm_package_dependencies_babel_preset_react: '^6.24.1' }
clean-webpack-plugin: /Users/a/Documents/reactNative/reactstudy/webpackdemo/dist/*.* has been removed.
clean-webpack-plugin: /Users/a/Documents/reactNative/reactstudy/webpackdemo/build has been removed.
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/a/Documents/reactNative/reactstudy/webpackdemo/dist
ℹ ｢wdm｣: 
ℹ ｢wdm｣: Compiled successfully.

可以看到系统目前的环境变量。如果我们想用自己自定义义环境变量怎么办。

比如取个ENV_CUSTOM;怎么使用呢。

  "scripts": {
    "start": "webpack",
    "dev": "env ENV_CUSTOM='custom_env' webpack-dev-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

可能通过在调用webpack或webpack-dev-server打包前使用env 来进行设置。

然后在webpack.config.js中打印输出 

console.log('===================');

console.log(process.env.ENV_CUSTOM);

结果：

AdeMacBook-Pro-3:webpackdemo a$ npm run dev

> webpackdemo@1.0.0 dev /Users/a/Documents/reactNative/reactstudy/webpackdemo
> env ENV_CUSTOM='custom_env' webpack-dev-server

===================
custom_env
clean-webpack-plugin: /Users/a/Documents/reactNative/reactstudy/webpackdemo/dist/*.* has been removed.
clean-webpack-plugin: /Users/a/Documents/reactNative/reactstudy/webpackdemo/build has been removed.
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/a/Documents/reactNative/reactstudy/webpackdemo/dist
ℹ ｢wdm｣: 
ℹ ｢wdm｣: Compiled successfully.

从打包的过程中可以看到我们通过process.env.ENV_CUSTOM就可以正确的读取设置环境变量的值了。

也可以使用类似,先set的方式。

"build": "set OWNNER_ENV=production&&webpack",

前面用到的是系统环境变量。下面了解下传通的试。

webpack 官网中有提到可以进行多种配置类型：https://www.webpackjs.com/configuration/configuration-types/

可以将webpack.config.js中导出为一个函数或导出为一个promise或导出多个配置对象。

环境变量作为参变量传入所以选择导出为函数最为合适一种。

-module.exports = {
+module.exports = function(env, argv) {
+  return {
+    mode: env.production ? 'production' : 'development',
+    devtool: env.production ? 'source-maps' : 'eval',
     plugins: [
       new webpack.optimize.UglifyJsPlugin({
+        compress: argv['optimize-minimize'] // 只有传入 -p 或 --optimize-minimize
       })
     ]
+  };
};

这是官网一个说明。下面我们将自己写的webpack.config.js改造一下。

'use strict';

...

module.exports = (env, args) => {
    console.log(env);
    console.log(args);
    return {
        entry: {
            app: path.join(__dirname, 'src', 'index.js')
        },
        mode: 'development',
        output: {
            filename: 'bundle.[hash].js',
            path: path.resolve(__dirname, 'dist')
        },
        devtool: 'inline-source-map', //开发阶段的
        plugins: [
            new CleanWebpackPlugin(pathsToClean, cleanOptions),
            new htmlplugin({
                title: 'Html 插件 Demo',
                template: path.join(__dirname, 'public', 'index.html')
            })
        ],
        module: {
            rules: [{
                test: /\.(js|jsx)$/,      //当碰到js或jsx文件时,即文件中用到import 或reqire导入js时
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ["es2015", "react"]
                    }
                },
                exclude: [
                    path.resolve(__dirname, './node_modules')
                ]
            },
            {
                test: /\.(css)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            url: true,
                            sourceMap: true,
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                loader: 'url-loader',
                options: {
                    limit: 10000
                }
            }
            ]
        },
        devServer: {
            contentBase: path.join(__dirname, "dist"),
            overlay: true,
            hot: true,
            inline: true,
            // quiet: true
            stats: "none"
        }
    }
}

输出的结果：

AdeMacBook-Pro-3:webpackdemo a$ npm run dev

> webpackdemo@1.0.0 dev /Users/a/Documents/reactNative/reactstudy/webpackdemo
> webpack-dev-server --env.CUSTOM=local --env.prodution --progress

{ CUSTOM: 'local', prodution: true }
{ _: [],
  cache: null,
  bail: null,
  profile: null,
  inline: true,
  color: { level: 2, hasBasic: true, has256: true, has16m: false },
  colors: { level: 2, hasBasic: true, has256: true, has16m: false },
  info: true,
  env: { CUSTOM: 'local', prodution: true },
  progress: true,
  'client-log-level': 'info',
  clientLogLevel: 'info',
  host: 'localhost',
  '$0':
   '/Users/a/Documents/reactNative/reactstudy/webpackdemo/node_modules/.bin/webpack-dev-server' }
clean-webpack-plugin: /Users/a/Documents/reactNative/reactstudy/webpackdemo/dist/*.* has been removed.
clean-webpack-plugin: /Users/a/Documents/reactNative/reactstudy/webpackdemo/build has been removed.
 10% building 1/1 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/a/Documents/reactNative/reactstudy/webpackdemo/dist
ℹ ｢wdm｣:                                                                       
ℹ ｢wdm｣: Compiled successfully.

到这里可以知道环境变量怎么传值和读取了。剩下的就是如何根据环境变量的值进行配置自己的config.js了。三目条件运算符。

好了。webpack中有一个mode属性，传入的值为developerment或production来区分开发还是生产环境。根据自己的需求来使用是系统环境变量方便还是入参方便的方式进行。