webpack4.2開發環境入門配置
webpack4.x開發環境配置
寫這篇文章的初衷在於，當我們使用npm安裝webpack時，若不指定webpack的版本，將預設安裝最新版，筆者測試時預設安裝的是4.26.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檔案，它用於儲存關於專案的資訊。
三、嘗試打包出現提示
我們在專案根目錄新建一個檔案index.js，並在其中輸入程式碼：
function hello(str) {
alert(str);
}
hello(‘hello world!’);
然後，我們便可以滿懷期待地嘗試打包，在命令列輸入：
webpack index.js bundle.js
意思是將index.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
翻譯成中文：
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：
npm install webpack-cli -D
這裡-D引數和–save-dev的作用相同，只是一種簡寫而已。筆者這裡安裝完成後，顯示webpack-cli版本是3.1.2。
我們在根目錄再次輸入：
webpack src/index.js dist/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命令。那麼是什麼地方出了問題呢？
必須再全域性安裝
npm install -g webpack-cli
五、設定模式
我們再次嘗試打包：
webpack src/index.js dist/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 ./index.js bundle.js
Module not found:ERROR:Can’t resolve ‘bundle.js’ in ‘C:/Users/你的使用者名稱/Desktop/webpack-test’
@ multi ./index.js bundle.js
翻譯成中文：
配置警告：
“mode”選項尚未設定。將“mode”選項設為“development”或“production”以啟用此環境的預設設定。
multi錯誤 ./ hello.js bundle.js
未發現模組：錯誤：無法解析’C:/Users/你的使用者名稱/Desktop/webpack-test’中的bundle.js
@ multi ./index.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檔案仍然會報錯，因此我們
將index.js移動到’./src’。
現在如果我們再次執行
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、開發模式安裝 npm install webpack --save-dev
6、開發模式安裝 npm install webpack-cli --save-dev
7、webpack –mode development/production進行打包，可在package.json中配置dev和build的指令碼，便只需執行npm run dev/build，作用相同。
8、在webpack –mode development/production可串聯設定其他引數。
目前
筆者最近測試了一下，只在開發環境下同時安裝webpack和webpack-cli也能夠執行，不過也需要配置webpack –mode development/production進行打包
也可以新建一個webpack.config.js檔案來簡單配置一些相關指令碼
const path = require('path');
console.log(path.resolve('./'));
module.exports={
//打包入口檔案
entry:"./src/index.js",
//模式：開發模式
mode:"development",
// 輸出檔案
output:{
path:path.resolve('./dist'),//輸出檔案的絕對路徑
filename:"bundle.js"//打包後的檔名
},
//模組解析規則
module:{
rules:[{
test:/\.js$/,
use:"babel-loader",
exclude:/node_modules/
}]
}
}
注
經過webpack打包後的檔案任然會保留原來程式碼中ES6的程式碼，我們還需要安裝babel來幫助我們將ES6的程式碼轉化成ES5程式碼
npm i babel-core babel-loader babel-preset-es2015 -D
完成後我們需要新建一個.babelrc的檔案，簡單的配置一下
{
"presets":[
"es2015"
],
"plugins":[]
}
然後我們繼續打包
webpack --mode development
但是會報錯，主要的錯誤就是你使用[email protected]的話，系統提示你使用[email protected]版本，如果是這個版本號就不會報錯
不是的話我們需要重新安裝
npm i [email protected]* -D
完成後再執行webpack --mode development
出現下面的程式碼那就恭喜你成功了
Hash: b440c141764fecc88adc
Version: webpack 4.26.1
Time: 1048ms
Built at: 2018-12-01 16:51:37
Asset Size Chunks Chunk Names
bundle.js 3.95 KiB main [emitted] main
Entrypoint main = bundle.js
[./src/index.js] 154 bytes {main} [built]