写这篇文章的初衷在于，虽然网络上关于webpack的教程不少，但是大多已经过时，由于webpack版本更新后许多操作变化很大，很多教程的经验已经不适合。当我们使用npm安装webpack时，若不指定webpack的版本，将默认安装最新版，笔者测试时默认安装的是4.1.1，并不能照搬老教程的方法。为此，笔者进行了最新版配置的探索，使用的是windows操作系统，如果你的是webpack4.x版本，可参考进行配置。
注意：本文并不是直接把正确步骤放上去，而是分析了各种报错情况及原因，文章的步骤显得绕弯子。如果仅仅想看正确步骤，建议直接看第八点的配置步骤再返回查找各步骤的操作。
一、全局安装webpack
如果我们按照旧版本的安装方式，直接使用npm全局安装webpack，我们预期全局安装webpack后，便能在命令行中使用webpack指令。我们在命令行输入：
npm install -g webpack
当执行该操作后，便在C:\Users\你的用户名\AppData\Roaming\npm\node_modules创建了webpack文件夹，里面存储了刚刚全局安装的webpack模块。
二、创建项目
我们在合适位置新建一个文件夹webpack-test，用于存放我们的项目。
命令行中定位到webpack-test文件夹下，输入以下命令进行项目的初始化：
npm init
这里，要求设置很多选项，可以按项目情况配置也可以不填直接回车。完成后，我们发现文件夹中增加了package.json文件，它用于保存关于项目的信息。
三、尝试打包出现提示
我们在项目根目录新建一个文件hello.js，并在其中输入代码：
function hello(str) { alert(str); } hello('hello world!');
然后，我们便可以满怀期待地尝试打包，在命令行输入：
webpack hello.js bundle.js
意思是将hello.js打包成另一个文件bundle.js。但很不幸，4.1.1版本会提示：
The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D
翻译成中文：
CLI（命令行工具）已经转移到了一个单独的包webpack-cli中。
除了webpack自身外，请额外安装webpack-cli来使用CLI。
-> 使用npm安装：npm install webpack-cli -D
->使用yarn安装：yarn add webpack-cli -D
意思是，我们需要额外安装webpack-cli，否则便不能在命令行中使用webpack的相关命令。
四、安装webpack-cli
我们在项目中本地安装webpack-cli：
npm install webpack-cli -D
这里-D参数和–save-dev的作用相同，只是一种简写而已。笔者这里安装完成后，显示webpack-cli版本是2.0.10。
我们在根目录再次输入：
webpack hello.js bundle.js
很不幸，还是提示：
The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D
这表明我们本地安装webpack-cli后并没有起作用，在命令行中依然不能使用webpack命令。那么是什么地方出了问题呢？
我们不难想到，
旧版本的webpack中，webpack指令要能在命令行中使用，需要全局安装webpack，而不是本地安装，因此这里的webpack-cli也应该是同理。
我们卸载本地安装的webpack-cli，全局安装webpack-cli：
npm uninstall webpack-cli npm install -g webpack-cli
五、设置模式
我们再次尝试打包：
webpack hello.js bundle.js
看样子似乎是可以运行了，但又出现了新的提示：
WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this enviroment.
ERROR in multi ./hello.js bundle.js
Module not found:ERROR:Can't resolve 'bundle.js' in 'C:/Users/你的用户名/Desktop/webpack-test'
@ multi ./hello.js bundle.js
翻译成中文：
配置警告：
“mode”选项尚未设置。将“mode”选项设为“development”或“production”以启用此环境的默认设置。
multi错误 ./ hello.js bundle.js
未发现模块：错误：无法解析'C:/Users/你的用户名/Desktop/webpack-test'中的bundle.js
@ multi ./hello.js bundle.js
这里提示我们存在的第一个问题是没有配置webpack的mode选项，默认有production和development两种模式可以设置，因此我们尝试设为development模式，在命令行输入：
webpack --mode development
我们看到进行了打包并显示了Hash、Version、Time、Build at信息，表明已经可以打包。不过，仍然有错误提示：
ERROR in Entry module not found:ERROR:Can't resolve './src' in 'C:/Users/你的用户名/Desktop/webpack-test'
翻译成中文：
未找到入口模块发生错误：错误：无法解析'C:/Users/你的用户名/Desktop/webpack-test'中的'./src'
六、创建入口文件