一.基本安裝

首先我們要創(chuàng)建一個目錄，初始化npm，以及在本地安裝webpack：復(fù)制代碼mkdir webpackapp && cd webpackapp復(fù)制代碼npm init -y復(fù)制代碼npm install --save-dev webapck復(fù)制代碼現(xiàn)在我們看一下我們創(chuàng)建的目錄以及目錄下的結(jié)構(gòu)復(fù)制代碼

二.簡單實用webpack

我們先全局安裝webpack： npm install -g webpack復(fù)制代碼此時，我們可以執(zhí)行命令：webpack -v來查看webpack的版本號。復(fù)制代碼我們在根目錄下新建一個文件：hello.js，并在其中輸入代碼。復(fù)制代碼function hello(str) { alert(str); } hello('hello world!');復(fù)制代碼這時，我們在命令行中輸入：復(fù)制代碼webpack hello.js bundle.js復(fù)制代碼然而，預(yù)期的結(jié)果和想象的不一樣：復(fù)制代碼The CLI moved into a separate package: webpack-cli Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)復(fù)制代碼或復(fù)制代碼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復(fù)制代碼報出這兩種任意一種的結(jié)果的意思是什么呢？ 翻譯成中文： CLI（命令行工具）已經(jīng)轉(zhuǎn)移到了一個單獨的包webpack-cli中。 除了webpack自身外，請額外安裝webpack-cli來使用CLI。 -> 使用npm安裝：npm install webpack-cli -D ->使用yarn安裝：yarn add webpack-cli -D復(fù)制代碼也就是說，在以前的webpack版本中CLI（命令行工具）是存在于webpack中的，而現(xiàn)在呢，它自己獨立出來了，單獨地放在一個單獨webpack-cli包中。所以呢，現(xiàn)在想要使用CLI（命令行工具）就必須安裝webpack-cli才行。復(fù)制代碼安裝webpack-cli:復(fù)制代碼npm install webpack-cli -D復(fù)制代碼再次運行：復(fù)制代碼webpack hello.js bundle.js復(fù)制代碼發(fā)現(xiàn)還是報出：復(fù)制代碼The CLI moved into a separate package: webpack-cli Would you like to install webpack-cli? (That will run npm install -D webpack-cli) (yes/NO)復(fù)制代碼這時，我們就要全局安裝webpack-cli：復(fù)制代碼npm install webpack-cli -g復(fù)制代碼現(xiàn)在，我們再試一下。復(fù)制代碼webpack hello.js bundle.js復(fù)制代碼結(jié)果又出現(xiàn)了新情況：復(fù)制代碼WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ ERROR in multi ./hello.js bundle.js Module not found: Error: Can't resolve 'bundle.js' in 'C:\Users\Administrator\Desktop\webpackapp' @ multi ./hello.js bundle.js復(fù)制代碼翻譯成中文： 配置警告： “mode”選項尚未設(shè)置。將“mode”選項設(shè)為“development”或“production”以啟用此環(huán)境的默認設(shè)置。 multi錯誤 ./ hello.js bundle.js 未發(fā)現(xiàn)模塊：錯誤：無法解析’C:/Users/你的用戶名/Desktop/webpack-test’中的bundle.js @ multi ./hello.js bundle.js復(fù)制代碼這里的提示就是告訴我們，存在的第一個問題就是沒有配置webpack的mode選項，默認的有production和development兩種模式可以設(shè)置，因此我們嘗試設(shè)置為development模式，在命令行中輸入：復(fù)制代碼webpack --mode development復(fù)制代碼我們看到進行了打包并顯示了Hash、Version、Time、Build at信息，表明已經(jīng)可以打包。不過，仍然有錯誤提示：復(fù)制代碼ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\Administrator\Desktop\webpackapp'復(fù)制代碼翻譯成中文：復(fù)制代碼未找到入口模塊發(fā)生錯誤：錯誤：無法解析：'C:\Users\Administrator\Desktop\webpackapp'復(fù)制代碼它的意思就是，表明webpack4.x是以項目根目錄下的'./src'作為入口，但是我們的項目中缺乏該路徑，因此我們在根目錄下創(chuàng)建一個src文件夾，事實上，webpack4.x以'./src/index.js'作為入口，單單創(chuàng)建src文件夾而沒有index.js文件仍然會報錯，因此我們：復(fù)制代碼將hello.js移動到'./src'中,并重新命名為'index.js'.復(fù)制代碼我們在運行一次： webpack index.js bundle.js復(fù)制代碼它還會提示can.t resolve相關(guān)的錯誤。復(fù)制代碼這種錯誤的原因是：webpack4.x的打包已經(jīng)不能用'webpack 文件a 文件b' 這種方式打包了，而是在命令行中直接運行'webpack --mode development'或者'webpack --mode production'這種方式來完成打包。其中，入口文件是'./src/index.js',輸出路徑是'./dist/main.js'。其中，src目錄中的index.js文件需要我們手動的去創(chuàng)建，而dist目錄及dist目錄下的main.js文件它會自動生成。所以說呢，這種'webpack 文件a 文件b'的打包方式已經(jīng)不適用了，而是改為直接運行：復(fù)制代碼webpack --mode development復(fù)制代碼或復(fù)制代碼webpack --mde production復(fù)制代碼出現(xiàn)下面這種情況說明打包成功：復(fù)制代碼C:\Users\Administrator\Desktop\webpackapp>webpack --mode development Hash: c66758f7d1a4004b7b60 Version: webpack 4.5.0 Time: 608ms Built at: 2018-4-6 00:42:40 Asset Size Chunks Chunk Names main.js 2.88 KiB main [emitted] main Entrypoint main = main.js [./src/index.js] 65 bytes {main} [built]復(fù)制代碼

不過每次都要輸入這個命令，非常麻煩，我們在package.json中scripts中加入兩個成員：

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"webpack --mode development", "build":"webpack --mode production" }復(fù)制代碼以后在打包的過程中，我們只需要執(zhí)行npm run dev就相當于執(zhí)行webpack --mode development， 執(zhí)行npm run build就相當于執(zhí)行webpack --mode production復(fù)制代碼我們?nèi)绻枰渲脀ebpack指令的其他參數(shù)，只需要在webpack –mode production/development后加上其他參數(shù)即可，如： webpack --mode development --watch --progress --display-modules --colors --display-reasons復(fù)制代碼當然，這也可以寫入package.json的scripts之中。復(fù)制代碼總結(jié)： 我們可以將以上探索進行整理總結(jié)，首先是注意事項： 1、webpack-cli必須要全局安裝，否則不能使用webpack指令； 2、webpack也必須要全局安裝，否則也不能使用webpack指令。 3、webpack4.x中webpack.config.js這樣的配置文件不是必須的。 4、默認入口文件是./src/index.js，默認輸出文件./dist/main.js。復(fù)制代碼配置步驟： 1、創(chuàng)建工程目錄； 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可串聯(lián)設(shè)置其他參數(shù)。復(fù)制代碼

今天就講到這里吧，后續(xù)會繼續(xù)更新，別忘了關(guān)注了哦！

轉(zhuǎn)載于:https://juejin.im/post/5ac65a376fb9a028cc6174f3

總結(jié)

以上是生活随笔為你收集整理的webpack二（以webpack4.x起步）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。