预备知识

npm 简单介绍

npm 是管理包的工具，package.json、package-lock.json和node_modules都是它的一部分。

其实大部分的时候我们只需要关注package.json文件就可以

它的main表示当前包的入口
devDependencies 表示开发环境使用到的npm包， dependencies表示生产环境需要使用到的npm包
scripts 表示需要执行的脚本指令
```
{
  "script": {
    "start": "echo '执行了start script指令'"
  }
}
```
执行npm run start的话会自动的执行 echo '执行了start script指令'（自动的找到对应的可执行程序执行）

npx 预安装

npm如果没有全局安装，没有配置对应文件的环境变量是无法访问npm包的可执行文件的：即使你在项目中 npm i eslint -D，eslint --init会无效。

npx可以解决这个问题，npx搜索包的路径为 CommonJS 语法的 node_modules 路径，通过一层层查找到最后的可执行文件，最终执行命令。

npx还可以预安装，比如npx create-react-app ./my-react-app，即使你没有全局安装 create-react-app 这个包，也是可以直接的执行，它会下载临时的包，然后执行命令，最后删除。

因此，在项目中，如果未全局安装 webpack，可以尝试;

npx webpack 
// 或者
npx webpack-dev-server // 如果需要启动服务挂载的话

npm script

webpack和webpack-cli可以全局安装，它有对应的可执行文件，能够webpack xxx.xx直接的打包文件。但是一般在项目中，都有自己的package.json，把webpack和webpack-cli安装在DEV环境下（-D | --save-dev），要使用webpack的话需要使用npx的能力：npx webpack xxx.xx。

每次执行 npx webpack .... 一大段指令太麻烦，你可以在当前目录下的package.json的script编写对应的指令，这个指令默认使用npx执行，因此可以省略npx

{
  "scripts": {
    // 等同于 npx webpack --mode development
    "start": "webpack --mode development",
    "build": "webpack --mode production"
  }
}

对的，正如你看到的，scripts也是按照 CommonJS的node_modules 和环境变量（执行调用终端的能力）一起检索可执行文件，执行命令

webpack 参数命令

webpack: 根据当前终端目录下的webpack.config.js打包，也可以添加参数：
```
npx webpack -c/--config webpack.config.js.path
```
webpack: 设置当前打包的mode，优先级最强
```
npx webpack --mode development | production
```

script执行node

一旦在package.json调用了node执行脚本，那么process.cwd就是 package.json 的根目录

前言-预备知识