本文實例講述了webpack4.x開發(fā)環(huán)境配置方法。分享給大家供大家參考，具體如下：

寫這篇文章的初衷在于，雖然網(wǎng)絡(luò)上關(guān)于webpack的教程不少，但是大多已經(jīng)過時，由于webpack版本更新后許多操作變化很大，很多教程的經(jīng)驗已經(jīng)不適合。當我們使用npm安裝webpack時，若不指定webpack的版本，將默認安裝最新版，筆者測試時默認安裝的是4.1.1，并不能照搬老教程的方法。為此，筆者進行了最新版配置的探索，使用的是windows操作系統(tǒng)，如果你的是webpack4.x版本，可參考進行配置。

注意：本文并不是直接把正確步驟放上去，而是分析了各種報錯情況及原因，文章的步驟顯得繞彎子。如果僅僅想看正確步驟，建議直接看第八點的配置步驟再返回查找各步驟的操作。

一、全局安裝webpack

如果我們按照舊版本的安裝方式，直接使用npm全局安裝webpack，我們預(yù)期全局安裝webpack后，便能在命令行中使用webpack指令。我們在命令行輸入：

npm install -g webpack

當執(zhí)行該操作后，便在C:/Users/你的用戶名/AppData/Roaming/npm/node_modules創(chuàng)建了webpack文件夾，里面存儲了剛剛?cè)职惭b的webpack模塊。

二、創(chuàng)建項目

我們在合適位置新建一個文件夾webpack-test，用于存放我們的項目。
命令行中定位到webpack-test文件夾下，輸入以下命令進行項目的初始化：

npm init

這里，要求設(shè)置很多選項，可以按項目情況配置也可以不填直接回車。完成后，我們發(fā)現(xiàn)文件夾中增加了package.json文件，它用于保存關(guān)于項目的信息。

三、嘗試打包出現(xiàn)提示

我們在項目根目錄新建一個文件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（命令行工具）已經(jīng)轉(zhuǎn)移到了一個單獨的包webpack-cli中。
除了webpack自身外，請額外安裝webpack-cli來使用CLI。
-> 使用npm安裝：npm install webpack-cli -D
->使用yarn安裝：yarn add webpack-cli -D

意思是，我們需要額外安裝webpack-cli，否則便不能在命令行中使用webpack的相關(guān)命令。

四、安裝webpack-cli

我們在項目中本地安裝