1. 安装:
在Node官网中复制LTS版本的Linux Binaries (x64)链接
$ cd /tmp
$ wget https://npm.taobao.org/mirrors/node/v14.5.0/node-v14.5.0-linux-x64.tar.xz
$ tar xf node-v12.18.2-linux-x64.tar.xz
$ mv node-v12.18.2-linux-x64 /usr/local/node
$ ln -s /usr/local/node/bin/node /usr/bin/node
$ ln -s /usr/local/node/bin/npm /usr/bin/npm安装完成后,
package.json会有devDependencies和dependencies两项.
--save 和 --save-dev 的区别
npm i时使用--save和--save-dev，可分别将依赖（插件）记录到package.json中的dependencies和devDependencies下面。
dependencies下记录的是项目在运行时必须依赖的插件，常见的例如react jquery等，即及时项目打包好了、上线了，这些也是需要用的，否则程序无法正常执行。
devDependencies下记录的是项目在开发过程中使用的插件，例如这里我们开发过程中需要使用webpack打包，而我在工作中使用fis3打包，但是一旦项目打包发布、上线了之后，webpack和fis3就都没有用了，可卸磨杀驴。
只要遵循npm标准的都有package.json. 如webpack也有package.json,path:./node_modules/webpack/package.json见，其中也有devDependencies和dependencies。当我们使用npm i webpack时，./node_modules/webpack/package.json中的dependencies会被 npm 安装上，而devDependencies也没必要安装。
配置 webpack.config.js
为了提高学习效率，webpack 最最基础的用法，就不再挨个演示了（推荐一个非常好的入门文章，以及更多资料）这里我们把项目中的webpack.config.js这个配置文件详细的讲解一下，过程中也会照顾 0 基础的同学。
文件格式
webpack.config.js 就是一个普通的 js 文件，符合 commonJS 规范。最后输出一个对象，即module.exports = {...}
require('webpack') 先去package.json里面找的dependencies和devDependencies下面是否有,有的话，就去node_modules下面找webpack里面的package.json，再找里面的main选项。
输入 & 输出
这个比较基础，不过需要新建./app/index.jsx作为入口文件，目前项目中只有这一个入口文件。不过 webpack 支持多个入口文件，可查阅文档。
输出就是一个bundle.js，js 和 css 都在里面，不过只有在开发环境下才用，发布代码的时候，肯定不能只有这么一个文件，接下来会讲到。
module
针对不同类型的文件，使用不同的loader，当然使用之前要安装，例如npm i style-loader css-loader --save-dev。该项目代码中，我们用到的文件格式有：js/jsx 代码、css/less 代码、图片、字体文件。
less 是 css 的语法糖，可以更高效低冗余的写 css，不熟悉的朋友可去官网看看，非常简单。
在加载 css/less 时用到了postcss，主要使用autoprefixer功能，帮助自动加 css3 的浏览器前缀，非常好用。
编译 es6 和 jsx 语法时，用到家喻户晓的babel，另外还需增加一个.babelrc的配置文件。
plugins
使用 html 模板（需要npm i html-webpack-plugin --save-dev），这样可以将输出的文件名（如./bundle.js）自动注入到 html 中，不用我们自己手写。手写的话，一旦修改就需要改两个地方。
使用热加载和自动打开浏览器插件
devServer
对 webpack-dev-server 的配置
npm start
在 package.json 中，输入以下代码，将这一串命令封装为npm start，这样就可以运行项目代码了。
"scripts": {
"start": "NODE_ENV=dev webpack-dev-server --progress --colors"
}代码中NODE_ENV=dev代表当前是开发环境下，这里的"dev"可被 js 代码中的process.env.NODE_ENV得到并做一些其他处理。
定义环境全局变量
以下定义，可使得代码通过__DEV__得到当前是不是开发模式。
new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false'))
})打开./app/util/localStore.js可以看到if (__DEV__) { console.error('localStorage.getItem报错, ', ex.message) }，即只有开发环境下才提示error，发布之后就不会提示了。（因为发布的命令中用到NODE_ENV=production）