本文实例讲述了webpack4.x开发环境配置方法。分享给大家供大家参考，具体如下：
写这篇文章的初衷在于，虽然网络上关于webpack的教程不少，但是大多已经过时，由于webpack版本更新后许多操作变化很大，很多教程的经验已经不适合。当我们使用npm安装webpack时，若不指定webpack的版本，将默认安装最新版，笔者测试时默认安装的是4.1.1，并不能照搬老教程的方法。为此，笔者进行了最新版配置的探索，使用的是windows操作系统，如果你的是webpack4.x版本，可参考进行配置。
注意：本文并不是直接把正确步骤放上去，而是分析了各种报错情况及原因，文章的步骤显得绕弯子。如果仅仅想看正确步骤，建议直接看第八点的配置步骤再返回查找各步骤的操作。
一、全局安装webpack
如果我们按照旧版本的安装方式，直接使用npm全局安装webpack，我们预期全局安装webpack后，便能在命令行中使用webpack指令。我们在命令行输入：
当执行该操作后，便在用户名\AppData\Roaming\npm\node_modules创建了webpack文件夹，里面存储了刚刚全局安装的webpack模块。
二、创建项目
我们在合适位置新建一个文件夹webpack-test，用于存放我们的项目。 命令行中定位到webpack-test文件夹下，输入以下命令进行项目的初始化：
这里，要求设置很多选项，可以按项目情况配置也可以不填直接回车。完成后，我们发现文件夹中增加了package.json文件，它用于保存关于项目的信息。
三、尝试打包出现提示
我们在项目根目录新建一个文件代码：
然后，我们便可以满怀期待地尝试打包，在命令行输入：
意思是将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：
这里-D参数和–save-dev的作用相同，只是一种简写而已。笔者这里安装完成后，显示webpack-cli版本是2.0.10。
我们在根目录再次输入：
很不幸，还是提示：
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：
五、设置模式
我们再次尝试打包：
看样子似乎是可以运行了，但又出现了新的提示：
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模式，在命令行输入：
我们看到进行了打包并显示了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'
六、创建入口文件
这表明webpack4.x是以项目根目录下的文件夹，事实上文件而没有文件仍然会报错，因此我们
将重命名为
现在如果我们再次执行
原因是，webpack4.x的打包已经不能用webpack 文件a 文件b的方式，而是直接运行webpack --mode development或者webpack --mode production，这样便会默认进行打包，入口文件是输出路径是文件需要手动创建，而dist目录及main.js会自动生成。
因此我们不再按webpack 文件a 文件b的方式运行webpack指令，而是直接运行
或者
这样便能够实现将
不过每次都要输入这个命令，非常麻烦，我们在
以后我们只需要在命令行执行 我们在根目录执行： 可以看到根目录下生成了dist目录，并且dist目录下生成了main.js文件，文件已经打包了文件的代码。 七、配置其他参数 我们如果需要配置webpack指令的其他参数，只需要在 当然，这也可以写入
八、总结 我们可以将以上探索进行整理总结，首先是注意事项： 1、webpack-cli必须要全局安装，否则不能使用webpack指令；
2、webpack也必须要全局安装，否则也不能使用webpack指令。
3、webpack4.x中webpack.config.js这样的配置文件不是必须的。
4、默认入口文件是./src/index.js，默认输出文件./dist/main.js。 配置步骤： 1、创建工程目录；
2、初始化工程目录：npm init。
3、全局安装webpack-cli。
4、全局安装webpack。
5、webpack –mode development/production进行打包，可在package.json中配置dev和build的脚本，便只需运行npm run dev/build，作用相同。
6、在webpack –mode development/production可串联设置其他参数。 希望本文所述对大家基于webpack的前端程序设计有所帮助。npm run dev便相当于执行webpack --mode development，执行npm run build便相当于执行webpack --mode production。
webpack –mode production/development后加上其他参数即可，如：