webpack4.x開(kāi)發(fā)環(huán)境配置詳解
本文實(shí)例講述了webpack4.x開(kāi)發(fā)環(huán)境配置方法。分享給大家供大家參考,具體如下:
寫(xiě)這篇文章的初衷在于,雖然網(wǎng)絡(luò)上關(guān)于webpack的教程不少,但是大多已經(jīng)過(guò)時(shí),由于webpack版本更新后許多操作變化很大,很多教程的經(jīng)驗(yàn)已經(jīng)不適合。當(dāng)我們使用npm安裝webpack時(shí),若不指定webpack的版本,將默認(rèn)安裝最新版,筆者測(cè)試時(shí)默認(rèn)安裝的是4.1.1,并不能照搬老教程的方法。為此,筆者進(jìn)行了最新版配置的探索,使用的是windows操作系統(tǒng),如果你的是webpack4.x版本,可參考進(jìn)行配置。
注意:本文并不是直接把正確步驟放上去,而是分析了各種報(bào)錯(cuò)情況及原因,文章的步驟顯得繞彎子。如果僅僅想看正確步驟,建議直接看第八點(diǎn)的配置步驟再返回查找各步驟的操作。
一、全局安裝webpack
如果我們按照舊版本的安裝方式,直接使用npm全局安裝webpack,我們預(yù)期全局安裝webpack后,便能在命令行中使用webpack指令。我們?cè)诿钚休斎耄?/p>
npm install -g webpack
當(dāng)執(zhí)行該操作后,便在C:\Users\你的用戶(hù)名\AppData\Roaming\npm\node_modules創(chuàng)建了webpack文件夾,里面存儲(chǔ)了剛剛?cè)职惭b的webpack模塊。
二、創(chuàng)建項(xiàng)目
我們?cè)诤线m位置新建一個(gè)文件夾webpack-test,用于存放我們的項(xiàng)目。
命令行中定位到webpack-test文件夾下,輸入以下命令進(jìn)行項(xiàng)目的初始化:
npm init
這里,要求設(shè)置很多選項(xiàng),可以按項(xiàng)目情況配置也可以不填直接回車(chē)。完成后,我們發(fā)現(xiàn)文件夾中增加了package.json文件,它用于保存關(guān)于項(xiàng)目的信息。
三、嘗試打包出現(xiàn)提示
我們?cè)陧?xiàng)目根目錄新建一個(gè)文件hello.js,并在其中輸入代碼:
function hello(str) { alert(str); } hello('hello world!');
然后,我們便可以滿(mǎn)懷期待地嘗試打包,在命令行輸入:
webpack hello.js bundle.js
意思是將hello.js打包成另一個(gè)文件bundle.js。但很不幸,4.1.1版本會(huì)提示:
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)移到了一個(gè)單獨(dú)的包webpack-cli中。
除了webpack自身外,請(qǐng)額外安裝webpack-cli來(lái)使用CLI。
-> 使用npm安裝:npm install webpack-cli -D
->使用yarn安裝:yarn add webpack-cli -D
意思是,我們需要額外安裝webpack-cli
,否則便不能在命令行中使用webpack的相關(guān)命令。
四、安裝webpack-cli
我們?cè)陧?xiàng)目中本地安裝webpack-cli
:
npm install webpack-cli -D
這里-D參數(shù)和–save-dev的作用相同,只是一種簡(jiǎn)寫(xiě)而已。筆者這里安裝完成后,顯示webpack-cli版本是2.0.10。
我們?cè)诟夸浽俅屋斎耄?/p>
webpack hello.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
這表明我們本地安裝webpack-cli
后并沒(méi)有起作用,在命令行中依然不能使用webpack命令。那么是什么地方出了問(wèn)題呢?
我們不難想到,
舊版本的webpack中,webpack指令要能在命令行中使用,需要全局安裝webpack,而不是本地安裝,因此這里的webpack-cli也應(yīng)該是同理。
我們卸載本地安裝的webpack-cli,全局安裝webpack-cli:
npm uninstall webpack-cli npm install -g webpack-cli
五、設(shè)置模式
我們?cè)俅螄L試打包:
webpack hello.js bundle.js
看樣子似乎是可以運(yùn)行了,但又出現(xiàn)了新的提示:
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 ./hello.js bundle.js
Module not found:ERROR:Can't resolve 'bundle.js' in 'C:/Users/你的用戶(hù)名/Desktop/webpack-test'
@ multi ./hello.js bundle.js
翻譯成中文:
配置警告:
“mode”選項(xiàng)尚未設(shè)置。將“mode”選項(xiàng)設(shè)為“development”或“production”以啟用此環(huán)境的默認(rèn)設(shè)置。
multi錯(cuò)誤 ./ hello.js bundle.js
未發(fā)現(xiàn)模塊:錯(cuò)誤:無(wú)法解析'C:/Users/你的用戶(hù)名/Desktop/webpack-test'中的bundle.js
@ multi ./hello.js bundle.js
這里提示我們存在的第一個(gè)問(wèn)題是沒(méi)有配置webpack的mode選項(xiàng),默認(rèn)有production和development兩種模式可以設(shè)置,因此我們嘗試設(shè)為development模式,在命令行輸入:
webpack --mode development
我們看到進(jìn)行了打包并顯示了Hash、Version、Time、Build at信息,表明已經(jīng)可以打包。不過(guò),仍然有錯(cuò)誤提示:
ERROR in Entry module not found:ERROR:Can't resolve './src' in 'C:/Users/你的用戶(hù)名/Desktop/webpack-test'
翻譯成中文:
未找到入口模塊發(fā)生錯(cuò)誤:錯(cuò)誤:無(wú)法解析'C:/Users/你的用戶(hù)名/Desktop/webpack-test'中的'./src'
六、創(chuàng)建入口文件
這表明webpack4.x是以項(xiàng)目根目錄下的'./src'作為入口,但我們的項(xiàng)目中缺乏該路徑,因此我們?cè)诟夸浵聞?chuàng)建src文件夾,事實(shí)上webpack4.x以'./src/index.js'作為入口,單單創(chuàng)建src文件而沒(méi)有index.js文件仍然會(huì)報(bào)錯(cuò),因此我們
將hello.js移動(dòng)到'./src',并重命名為index.js。
現(xiàn)在如果我們?cè)俅螆?zhí)行
webpack index.js bundle.js
會(huì)提示can.t resolve
相關(guān)的錯(cuò)誤。
原因是,webpack4.x的打包已經(jīng)不能用webpack 文件a 文件b
的方式,而是直接運(yùn)行webpack --mode development
或者webpack --mode production
,這樣便會(huì)默認(rèn)進(jìn)行打包,入口文件是'./src/index.js',輸出路徑是'./dist/main.js',其中src目錄即index.js文件需要手動(dòng)創(chuàng)建,而dist目錄及main.js會(huì)自動(dòng)生成。
因此我們不再按webpack 文件a 文件b
的方式運(yùn)行webpack指令,而是直接運(yùn)行
webpack --mode development
或者
webpack --mode production
這樣便能夠?qū)崿F(xiàn)將'./src/index.js'打包成'./dist/main.js'。
不過(guò)每次都要輸入這個(gè)命令,非常麻煩,我們?cè)?span style="color: #0000ff">package.json中scripts中加入兩個(gè)成員:
"dev":"webpack --mode development", "build":"webpack --mode production"
以后我們只需要在命令行執(zhí)行npm run dev
便相當(dāng)于執(zhí)行webpack --mode development
,執(zhí)行npm run build
便相當(dāng)于執(zhí)行webpack --mode production
。
我們?cè)诟夸泩?zhí)行:
npm run dev
可以看到根目錄下生成了dist目錄,并且dist目錄下生成了main.js文件,main.js文件已經(jīng)打包了src目錄下index.js文件的代碼。
七、配置其他參數(shù)
我們?nèi)绻枰渲脀ebpack指令的其他參數(shù),只需要在webpack –mode production/development
后加上其他參數(shù)即可,如:
webpack --mode development --watch --progress --display-modules --colors --display-reasons
當(dāng)然,這也可以寫(xiě)入package.json的scripts之中。
八、總結(jié)
我們可以將以上探索進(jìn)行整理總結(jié),首先是注意事項(xiàng):
1、webpack-cli必須要全局安裝,否則不能使用webpack指令;
2、webpack也必須要全局安裝,否則也不能使用webpack指令。
3、webpack4.x中webpack.config.js這樣的配置文件不是必須的。
4、默認(rèn)入口文件是./src/index.js,默認(rèn)輸出文件./dist/main.js。
配置步驟:
1、創(chuàng)建工程目錄;
2、初始化工程目錄:npm init。
3、全局安裝webpack-cli。
4、全局安裝webpack。
5、webpack –mode development/production進(jìn)行打包,可在package.json中配置dev和build的腳本,便只需運(yùn)行npm run dev/build,作用相同。
6、在webpack –mode development/production可串聯(lián)設(shè)置其他參數(shù)。
希望本文所述對(duì)大家基于webpack的前端程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS中call()和apply()的功能及用法實(shí)例分析
這篇文章主要介紹了JS中call()和apply()的功能及用法,結(jié)合實(shí)例形式詳細(xì)分析了JS中call()和apply()的功能、區(qū)別、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06js實(shí)現(xiàn)的下拉框二級(jí)聯(lián)動(dòng)效果
這篇文章主要介紹了js實(shí)現(xiàn)的下拉框二級(jí)聯(lián)動(dòng)效果,涉及JavaScript針對(duì)頁(yè)面元素的遍歷與節(jié)點(diǎn)操作相關(guān)技巧,需要的朋友可以參考下2016-04-04JavaScript中第三方庫(kù)Apollo的使用詳解
Apollo 是一個(gè)廣泛使用的 JavaScript 第三方庫(kù),主要用于構(gòu)建與 GraphQL API 交互的應(yīng)用程序,下面就跟隨小編一起來(lái)學(xué)習(xí)一下它的具體應(yīng)用吧2024-02-02js實(shí)現(xiàn)固定顯示區(qū)域內(nèi)自動(dòng)縮放圖片的方法
這篇文章主要介紹了js實(shí)現(xiàn)固定顯示區(qū)域內(nèi)自動(dòng)縮放圖片的方法,實(shí)例分析了javascript操作頁(yè)面元素及屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07探討JavaScript標(biāo)簽位置的存放與功能有無(wú)關(guān)系
在網(wǎng)頁(yè)中,我們可以將JavaScript代碼放在html文件中任何位置,但一般放在head或body標(biāo)簽里面。一般來(lái)說(shuō),<script>元素放在哪里與其的功能作用是緊密相關(guān)的,通過(guò)本文我們一起學(xué)習(xí)下2016-01-01

JavaScript預(yù)解析及相關(guān)技巧分析

深入理解js A*尋路算法原理與具體實(shí)現(xiàn)過(guò)程

ES6新特性六:promise對(duì)象實(shí)例詳解