一、全局安裝webpack
npm install webpack -g二、創建項目
我們在合適位置新建一個文件夾wpk-test，用於存放我們的項目。
命令行中定位到webpack-test文件夾下，輸入以下命令進行項目的初始化：
npm init這里，要求設置很多選項，可以按項目情況配置也可以不填直接回車。完成后，我們發現文件夾中增加了package.json文件，它用於保存關於項目的信息
三、安裝webpack-cli
我們在項目中本地安裝webpack-cli：
npm install webpack-cli -g
四、創建入口文件
這表明webpack4.x是以項目根目錄下的'./src'作為入口，因此我們在根目錄下創建src文件夾，事實上webpack4.x以'./src/index.js'作為入口，單單創建src文件而沒有index.js文件仍然會報錯，因此我們
將
hello.js移動到'./src'，並重命名為index.js。
打包命令：直接運行webpack --mode development或者webpack --mode production，這樣便會默認進行打包，入口文件是'./src/index.js'，輸出路徑是'./dist/main.js'，其中src目錄即index.js文件需要手動創建，而dist目錄及main.js會自動生成。
這樣便能夠實現將'./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文件的代碼。
五、總結
配置步驟：
1、創建工程目錄；
2、初始化工程目錄：npm init。
3、全局安裝webpack-cli。
4、全局安裝webpack。
5、webpack –mode development或webpack –mode production進行打包，可在package.json中配置dev和build的腳本，便只需運行npm run dev/build，作用相同。