webpack如何創(chuàng)建jquery項目

這篇文章將為大家詳細(xì)講解有關(guān)webpack如何創(chuàng)建jquery項目，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司專業(yè)提供棕樹數(shù)據(jù)中心服務(wù)，為用戶提供五星數(shù)據(jù)中心、電信、雙線接入解決方案，用戶可自行在線購買棕樹數(shù)據(jù)中心服務(wù)，并享受7*24小時金牌售后服務(wù)。

1.創(chuàng)建文件夾"webpack-study"

2.使用webstrom打開文件夾所在位置。在根目錄上創(chuàng)建一個文件，文件命名為“src”，在src文件下新建css、images、js文件夾，在src文件夾下新建index.html文件和main.js文件

3.現(xiàn)在我們需要完成一個隔行變色的需求，來熟悉webpack的使用過程。在index.html文件下添加6個li

4.我準(zhǔn)備使用jquery來完成隔行變色。首先初始化webpack，在終端輸入

在根目錄下會生成一個package.json的文件，里面是相應(yīng)的配置信息

5.通過webpack來安裝jquery。在終端輸入

成功之后，根目錄下會生成一個“node_modules”的文件夾

6.在“main.js”中通過import $ from 'jquery'來導(dǎo)入模塊

7.在index.html中引入main.js文件，寫的效果在瀏覽器中并沒有生效。import語法太高級，瀏覽器沒辦法識別。這個時候我們就必須通過webpack處理一下，打包出來一個文件。在終端中輸入

文件夾中也生成出來dist文件夾和bundle.js文件

但是終端報了一個警告

黃色部分的警告的意思是，沒有設(shè)置模式，有開發(fā)模式和生產(chǎn)模式兩種，接下來，找到package.json.添加上"dev"和"build"這兩個信息以及他們的值。

在根目錄上新建“webpack-config.js”文件

問題得到解決

8.index.html引入bundle.js文件，瀏覽器效果顯示正常。

通過這個小栗子我們能發(fā)現(xiàn)webpack能夠解決js文件之間相互的依賴關(guān)系 ；還能夠處理js的兼容問題，把高級的、瀏覽器不識別的語法轉(zhuǎn)為低級的、瀏覽器能正常識別的語法。

9.修改main.js中l(wèi)i奇數(shù)行背景色，我們想在瀏覽器上看修改之后的效果，是否一直需要在終端中輸入

我們能否直接輸入“webpack”就能達到我們想要的效果呢？

10.在終端中輸入"webpack"

彈出提示是否安裝“webpack-cli”，輸入“no”之后，自己在終端

安裝成功之后，在終端輸入“webpack”依然彈出上面的提示。

11.在終端輸入

然后在終端輸入webpack成功。

12.在根目錄下新建“webpack.config.js”配置文件，由于運行webpack命令的時候，webpack需要指定入口文件和輸出文件的路徑，所以，我們需要在——webpack.config.js——中配置這兩個路徑：

使用“webpack-dev-server”這個工具，來實現(xiàn)自動打包編譯的功能

關(guān)于“webpack如何創(chuàng)建jquery項目”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

分享題目：webpack如何創(chuàng)建jquery項目
本文來源：http://bm7419.com/article8/gociip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、移動網(wǎng)站建設(shè)、云服務(wù)器、品牌網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)