webpack4.x开发环境配置详解
本文实例讲述了webpack4.x开发环境配置方法。分享给大家供大家参考，具体如下：
写这篇文章的初衷在于，虽然网络上关于webpack的教程不少，但是大多已经过时，由于webpack版本更新后许多操作变化很大，很多教程的经验已经不适合。当我们使用npm安装webpack时，若不指定webpack的版本，将默认安装最新版，笔者测试时默认安装的是4.1.1，并不能照搬老教程的方法。为此，笔者进行了最新版配置的探索，使用的是windows操作系统，如果你的是webpack4.x版本，可参考进行配置。
注意：本文并不是直接把正确步骤放上去，而是分析了各种报错情况及原因，文章的步骤显得绕弯子。如果仅仅想看正确步骤，建议直接看第八点的配置步骤再返回查找各步骤的操作。
一、全局安装webpack
如果我们按照旧版本的安装方式，直接使用npm全局安装webpack，我们预期全局安装webpack后，便能在命令行中使用webpack指令。我们在命令行输入：
npminstall-gwebpack
当执行该操作后，便在C:\Users\你的用户名\AppData\Roaming\npm\node_modules创建了webpack文件夹，里面存储了刚刚全局安装的webpack模块。
二、创建项目
我们在合适位置新建一个文件夹webpack-test，用于存放我们的项目。
命令行中定位到webpack-test文件夹下，输入以下命令进行项目的初始化：
npminit
这里，要求设置很多选项，可以按项目情况配置也可以不填直接回车。完成后，我们发现文件夹中增加了package.json文件，它用于保存关于项目的信息。
三、尝试打包出现提示
我们在项目根目录新建一个文件hello.js，并在其中输入代码：
functionhello(str){
alert(str);
}
hello('helloworld!');
然后，我们便可以满怀期待地尝试打包，在命令行输入：
webpackhello.jsbundle.js
意思是将hello.js打包成另一个文件bundle.js。但很不幸，4.1.1版本会提示：
TheCLImovedintoaseparatepackage:webpack-cli.
Pleaseinstall'webpack-cli'inadditiontowebpackitselftousetheCLI.
->whenusingnpm:npminstallwebpack-cli-D
->whenusingyarn:yarnaddwebpack-cli-D
翻译成中文：
CLI（命令行工具）已经转移到了一个单独的包webpack-cli中。
除了webpack自身外，请额外安装webpack-cli来使用CLI。
->使用npm安装：npminstallwebpack-cli-D
->使用yarn安装：yarnaddwebpack-cli-D
意思是，我们需要额外安装webpack-cli，否则便不能在命令行中使用webpack的相关命令。
四、安装webpack-cli
我们在项目中本地安装webpack-cli：
npminstallwebpack-cli-D
这里-D参数和–save-dev的作用相同，只是一种简写而已。笔者这里安装完成后，显示webpack-cli版本是2.0.10。
我们在根目录再次输入：
webpackhello.jsbundle.js
很不幸，还是提示：
TheCLImovedintoaseparatepackage:webpack-cli.
Pleaseinstall'webpack-cli'inadditiontowebpackitselftousetheCLI.
->whenusingnpm:npminstallwebpack-cli-D
->whenusingyarn:yarnaddwebpack-cli-D
这表明我们本地安装webpack-cli后并没有起作用，在命令行中依然不能使用webpack命令。那么是什么地方出了问题呢？
我们不难想到，
旧版本的webpack中，webpack指令要能在命令行中使用，需要全局安装webpack，而不是本地安装，因此这里的webpack-cli也应该是同理。
我们卸载本地安装的webpack-cli，全局安装webpack-cli：
npmuninstallwebpack-cli npminstall-gwebpack-cli
五、设置模式
我们再次尝试打包：
webpackhello.jsbundle.js
看样子似乎是可以运行了，但又出现了新的提示：
WARNINGinconfiguration
The'mode'optionhasnotbeenset.Set 'mode'optionto'development'or'production'toenabledefaultsforthisenviroment.
ERRORinmulti./hello.jsbundle.js
Modulenotfound:ERROR:Can'tresolve'bundle.js'in'C:/Users/你的用户名/Desktop/webpack-test'
@multi./hello.jsbundle.js
翻译成中文：
配置警告：
“mode”选项尚未设置。将“mode”选项设为“development”或“production”以启用此环境的默认设置。
multi错误./hello.jsbundle.js
未发现模块：错误：无法解析'C:/Users/你的用户名/Desktop/webpack-test'中的bundle.js
@multi./hello.jsbundle.js
这里提示我们存在的第一个问题是没有配置webpack的mode选项，默认有production和development两种模式可以设置，因此我们尝试设为development模式，在命令行输入：
webpack--modedevelopment
我们看到进行了打包并显示了Hash、Version、Time、Buildat信息，表明已经可以打包。不过，仍然有错误提示：
ERRORinEntrymodulenotfound:ERROR:Can'tresolve'./src'in'C:/Users/你的用户名/Desktop/webpack-test'
翻译成中文：
未找到入口模块发生错误：错误：无法解析'C:/Users/你的用户名/Desktop/webpack-test'中的'./src'
六、创建入口文件
这表明webpack4.x是以项目根目录下的'./src'作为入口，但我们的项目中缺乏该路径，因此我们在根目录下创建src文件夹，事实上webpack4.x以'./src/index.js'作为入口，单单创建src文件而没有index.js文件仍然会报错，因此我们
将hello.js移动到'./src'，并重命名为index.js。
现在如果我们再次执行
webpackindex.jsbundle.js
会提示can.tresolve相关的错误。
原因是，webpack4.x的打包已经不能用webpack文件a文件b的方式，而是直接运行webpack--modedevelopment或者webpack--modeproduction，这样便会默认进行打包，入口文件是'./src/index.js'，输出路径是'./dist/main.js'，其中src目录即index.js文件需要手动创建，而dist目录及main.js会自动生成。
因此我们不再按webpack文件a文件b的方式运行webpack指令，而是直接运行
webpack--modedevelopment
或者
webpack--modeproduction
这样便能够实现将'./src/index.js'打包成'./dist/main.js'。
不过每次都要输入这个命令，非常麻烦，我们在package.json中scripts中加入两个成员：
"dev":"webpack--modedevelopment", "build":"webpack--modeproduction"
以后我们只需要在命令行执行npmrundev便相当于执行webpack--modedevelopment，执行npmrunbuild便相当于执行webpack--modeproduction。
我们在根目录执行：
npmrundev
可以看到根目录下生成了dist目录，并且dist目录下生成了main.js文件，main.js文件已经打包了src目录下index.js文件的代码。
七、配置其他参数
我们如果需要配置webpack指令的其他参数，只需要在webpack–modeproduction/development后加上其他参数即可，如：
webpack--modedevelopment--watch--progress--display-modules--colors--display-reasons
当然，这也可以写入package.json的scripts之中。
八、总结
我们可以将以上探索进行整理总结，首先是注意事项：
1、webpack-cli必须要全局安装，否则不能使用webpack指令；
2、webpack也必须要全局安装，否则也不能使用webpack指令。
3、webpack4.x中webpack.config.js这样的配置文件不是必须的。
4、默认入口文件是./src/index.js，默认输出文件./dist/main.js。
配置步骤：
1、创建工程目录；
2、初始化工程目录：npminit。
3、全局安装webpack-cli。
4、全局安装webpack。
5、webpack–modedevelopment/production进行打包，可在package.json中配置dev和build的脚本，便只需运行npmrundev/build，作用相同。
6、在webpack–modedevelopment/production可串联设置其他参数。
希望本文所述对大家基于webpack的前端程序设计有所帮助。