webpack 中用到的Node有关字段解析

之前一直想说总结一下webpack相关的知识点，终于有了一些时间。

以下是webpack种用的Node.js有关的字段解析，以及一些字段的扩展。

1.path

const path = require('path');

该字段是引用node.js中的path（路径）工具函数。
具体使用可以参照API（http://nodejs.cn/api/path.html#path_path）

在webpack中我们经常用到的方法有以下几个：

path.resolve(__dirname, '../src');

path.resolve()方法回把一个路径或路径片段的序列解析为一个绝对路径。

__dirname: 指的是当前执行的js文件的绝对路径。

实验一下：
建一个新的test.js，将文件放在桌面上。文件内容如下：

var path = require("path");
console.log(__dirname);

执行命令 node test.js

结果：
/Users/oker/Desktop

将文件内容改一下，如下所示：

var path = require("path");
console.log(__dirname);
console.log(path.resolve(__dirname, '/src'));
console.log(path.resolve(__dirname, '../src'));
console.log(path.resolve(__dirname, '../../src'));

结果：

/Users/oker/Desktop

/src

/Users/oker/src

/Users/src

如上所示可以看到，我们经常在代码中配置的代码是第三种。

通常我们会在基础的webpack配置文件中用到这个变量以及它的方法。

2. process事件

process是一个全局变量，它提供当前Node.js进程的有关信息，以及控制当前Node.js进程。因为是全局变量，所以无需使用require().

以下是我们经常用到的有关process的方法。

我们可以将process在工程中打印出来，可以看到包含了非常多的信息，包括title，version, env等等。

process.env

process.env属性返回一个包含用户环境信息的对象。

ex:

{
  TERM: 'xterm-256color',
  SHELL: '/usr/local/bin/bash',
  USER: 'maciej',
  PATH: '~/.bin/:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/bin',
  PWD: '/Users/maciej',
  EDITOR: 'vim',
  SHLVL: '1',
  HOME: '/Users/maciej',
  LOGNAME: 'maciej',
  _: '/usr/local/bin/node'
}

我们经常在配置文件中看到这样一些代码：

process.env.NODE_ENV = 'development';

module.exports = {
  NODE_ENV: JSON.stringify('development'),
};

当然，这是开发环境。

首先，我们来看下面这些代码。

.....
base.plugins.unshift(
  new webpack.DefinePlugin({ 'process.env': env }),
);

下面的代码中的env引用的是上面代码块导出的模块。

DefinePlugin可以在编译时期创建全局变量。该特性适用于开发版本同线上版本在某些常量上有区别的场景。

++可以参照文档++

在process.env中新增一个属性，会将属性值转换成字符串。

process.env.test = null;
console.log(process.env.test);
// => 'null'
process.env.test = undefined;
console.log(process.env.test);
// => 'undefined'

so, 这样就可以完全的理解了，process.env.NODE_ENV中的含义和用处了。

我的工程中，根据这个字段判断是开发环境还是线上环境进行代码压缩，平时开发可能希望代码运行的更快些，定位问题更准确些，就不用压缩代码了。

process.argv

返回一个数组，这个数组包含了启动Node.js进程时的命令行参数。第一个元素为 process.execPath。第二个元素为当前执行的javascript文件路径。剩余的元素为其他命令行参数。

process.execPath 属性返回启动Node.js进程的可执行文件所在的绝对路径。

ex:

'/usr/local/bin/node'

什么是可执行文件？！！！自行必应。

打印出来process.argv如下：

[ '/usr/local/bin/node',
  '/Users/oker/Documents/test/test/node_modules/.bin/webpack-dev-server',
  '--mode',
  'development',
  '--config',
  'build/webpack.config.dev.js',
  '--open',
  'test' ]

当同一个工程需要打出来不同的站点包时就需要用到这个方法来区分不同站点了。

process.cwd

该方法返回Node.js进程当前工作的目录。

以上，就是经常用在webpack打包时的一些字段和扩展。