[webpack]在项目本地安装和使用webpack

各种教程在介绍webpack的安装时，为了方便，都使用全局安装的方式：

npm install webpack webpack-cli -g

从webpack v4+版本开始，需要安装webpack-cli，详情见官方文档

然后在package.json的scripts字段中添加如下的命令：

"scripts": {
    "dev": "webpack --参数"
}

接下来，就可以在终端中使用webpack打包了：

npm run dev

如果在使用webpack打包时，遇到如下的错误：

'webpack'不是内部或外部命令，也不是可运行的程序或批处理文件

那一般是环境变量出问题了，node无法找到webpack。

实际上，webpack官方推荐在项目中本地安装：

对于大多数项目，我们建议本地安装。这可以在引入突破式变更(breaking change)版本时，更容易分别升级项目。

所以，我们用本地安装的方式代替全局安装：

npm install webpack webpack-cli --save-dev

webpack会被安装在项目目录下的node_modules目录中。但这时候执行下面的命令会报错：

npm run dev
//'webpack'不是内部或外部命令，也不是可运行的程序或批处理文件

原因同上。只要修改package.json的scripts字段中webpack的路径就可以了：

"dev": "node_modules/.bin/webpack --参数"

官方文档：

想要运行本地安装的 webpack，你可以通过 node_modules/.bin/webpack 来访问它的 bin 版本。
https://webpack.docschina.org/guides/installation/

使用其他的工具，比如webpack-dev-server，也是同样的做法。

End