webpack 4.30.0 打包一个简单项目

webpack 4X 前后的版本相差非常大，跟着一些资源学习打包，发现他们用的都是4之前的版本，而我安装的都是最新版本，所以在打包的时候会出现很多报错，刚开始我也是一头雾水，经过各种查资料，终于打包成功了！(*^▽^*)

到今天写这篇博文的时候，webpack 只更新到webpack 4.30.0，所以下面的小案例用的是这个版本，不知道后期 webpack 还会有什么样的更新。

用到的工具：

1. vscode编辑器
2. git命令面板（下载链接：https://git-scm.com/download/win）
3. node（因为会使用到npm，下载链接：https://nodejs.org/en/）

第一步，新建一个 webpack-demo 文件夹以及相应代码文件，我在D盘下创建的：

webpack 4X 版本下的指定的入口文件路径为 ./src ，所以我们不能随便起入口文件名，否则会打包出错。

第二步，在该文件目录下右键打开 git Bash Here，安装 webpack 以及 webpack-cli（必须安装在同一目录下）：

解释：这里为何还要安装 webpack-cli，因为 4X 版本之后 webpack 将 webpack-cli 进行分离，所以每次安装最新版本的webpack 的时候都要单独安装 webpack-cli，在这里切记 webpack 和 webpack-cli 一定都要安装在同一目录，不能一个全局安装一个本项目内安装。

第三步，初始化 package.json 文件：

还是在上述命令窗口下，路径也要在创建的文件下，npm init 回车生成 package.json，这里会让你填写很多参数，

（这里默认的入口文件是 index.js，测试的时候，我有指定入口文件名称非 index.js，但是打包的时候报错，应该是有相应的配置的，后面有时候了，我会试着配置配置，这里就先使用它默认的吧）

第四步，在 package.json 文件下的scripts中配置 "dev" 和 "build"，为的是打包时候不用每次都输入一长串 webpack --mode development 或 webpack --mode production ：

第五步，现在就可以运行打包了，选择自己的打包环境，然后生成默认 ./dist/main.js 文件：

npm run dev 或者 npm run build

 

以上是自己的一个实战小总结，有出错的地方欢迎各位盟友指出，Thanks♪(･ω･)ﾉ！