webpack4.x 开发环境配置详解

webpack4.x 开发环境配置详解

本文详细介绍 webpack4.x 版本的开发环境配置方法，供读者参考。

编写此文的初衷是网络上现有的 webpack 教程大多已过时。由于 webpack 版本更新后操作变化巨大，许多旧经验不再适用。当使用 npm 安装 webpack 时，若不指定具体版本，默认会安装最新版。笔者测试时默认安装的是 4.1.1 版本，发现无法直接照搬老教程的方法。因此，本文基于 Windows 操作系统进行了最新版配置的探索，如果你使用的是 webpack4.x 版本，可以参考本文进行配置。

注意：本文并非直接给出正确步骤，而是分析了各种报错情况及原因，因此步骤看起来较为曲折。如果只想查看正确步骤，建议直接阅读第八点的配置步骤，然后再回头查阅各步骤的具体操作。

全局安装 webpack

一、全局安装 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

我们在项目中本地安装 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'

创建入口文件

六、创建入口文件

这表明 webpack4.x 是以项目根目录下的 './src' 作为入口，但我们的项目中缺乏该路径，因此我们在根目录下创建 src 文件夹，事实上 webpack4.x 以 './src/index.js' 作为入口，单单创建 src 文件而没有 index.js 文件仍然会报错，因此我们

将 hello.js 移动到 './src'，并重命名为 index.js。

现在如果我们再次执行

webpack index.js bundle.js

会提示 can.t resolve 相关的错误。

原因是，webpack4.x 的打包已经不能用 webpack 文件a 文件b 的方式，而是直接运行 webpack --mode development 或者 webpack --mode production，这样便会默认进行打包，入口文件是 './src/index.js'，输出路径是 './dist/main.js'，其中 src 目录即 index.js 文件需要手动创建，而 dist 目录及 main.js 会自动生成。

因此我们不再按 webpack 文件a 文件b 的方式运行 webpack 指令，而是直接运行

webpack --mode development

或者

webpack --mode production

这样便能够实现将 './src/index.js' 打包成 './dist/main.js'。

不过每次都要输入这个命令，非常麻烦，我们在 package.json 中 scripts 中加入两个成员：

"dev":"webpack --mode development",
 "build":"webpack --mode production"

以后我们只需要在命令行执行 npm run dev 便相当于执行 webpack --mode development，执行 npm run build 便相当于执行 webpack --mode production。

我们在根目录执行：

npm run dev

可以看到根目录下生成了 dist 目录，并且 dist 目录下生成了 main.js 文件，main.js 文件已经打包了 src 目录下 index.js 文件的代码。

配置其他参数

七、配置其他参数

我们如果需要配置 webpack 指令的其他参数，只需要在 webpack –mode production/development 后加上其他参数即可，如：

webpack --mode development --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、初始化工程目录：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 的前端程序设计有所帮助。