webpack4.x开发环境配置详解

本文实例讲述了webpack4.x开发环境配置方法。分享给大家供大家参考，具体如下：

写这篇文章的初衷在于，虽然网络上关于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

我们在项目中本地安装