webpack的基礎(chǔ)使用

原視頻地址


創(chuàng)建列表隔行變色效果

1.基本操作:

1.新建項(xiàng)目空白目錄(不能叫webpack!!!),運(yùn)行npm init -y 命令,初始化管理配置文件 package.json剖膳。

在 vscode 中按快捷鍵 ctrl+` 可打開(kāi)終端

2.新建src目錄连霉,此目錄下新建 index.html莺奸,初始首頁(yè)

index.html文件內(nèi)容:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    // 執(zhí)行 ul>li{這是第$個(gè)li}*9 命令弛针,快速創(chuàng)建li
    <ul>
        <li>這是第1個(gè)li</li>
        <li>這是第2個(gè)li</li>
        <li>這是第3個(gè)li</li>
        <li>這是第4個(gè)li</li>
        <li>這是第5個(gè)li</li>
        <li>這是第6個(gè)li</li>
        <li>這是第7個(gè)li</li>
        <li>這是第8個(gè)li</li>
        <li>這是第9個(gè)li</li>
    </ul>
</body>
<script src='./index.js'></script>
</html>

3.運(yùn)行npm i jquery -S,安裝jquery

4.通過(guò)模塊化的形式,實(shí)現(xiàn)隔行變色效果

index.js文件內(nèi)容:

// jquery大小寫(xiě)不影響
import $ from 'jQuery'

// odd選擇器匹配索引值為奇數(shù)的元素铸董,從0開(kāi)始計(jì)數(shù)
// even選擇器匹配所有索引值為偶數(shù)的元素祟印,從0開(kāi)始計(jì)數(shù)
$(function(){
    $('li:odd').css('backgroundColor','pink')
    $('li:even').css('backgroundColor','lightblue')
})

運(yùn)行后發(fā)現(xiàn)并不能正確實(shí)現(xiàn)效果并且報(bào)錯(cuò),原因在于 index.js 文件的首行代碼是es6的模塊化語(yǔ)法粟害,瀏覽器對(duì)這種語(yǔ)法不能很好的識(shí)別蕴忆。

解決方法:
把代碼轉(zhuǎn)換成沒(méi)有兼容性的代碼,在index.html文件中導(dǎo)入轉(zhuǎn)換之后的<script src='xxx'></script>代碼悲幅。


2.在項(xiàng)目中安裝和配置webpack

1.運(yùn)行npm install webpack webpack-cli -D命令套鹅,安裝 webpack 相關(guān)的包

2.在項(xiàng)目根目錄中創(chuàng)建名為 webpack.config.js 的 webpack 配置文件

3.在 webpack 的配置文件中,初始化如下基本配置:

module.exports = {
        mode: 'development'  // mode 用來(lái)制定構(gòu)建模式
}

mode - development/production
開(kāi)發(fā)階段值盡量都設(shè)為 development

4.在 package.json 配置文件中的script 節(jié)點(diǎn)下汰具,新增 dev 腳本如下:

"scripts": {
"dev": "webpack"  // script節(jié)點(diǎn)下的腳本卓鹿,可以通過(guò) npm run 執(zhí)行
}

5.在終端中運(yùn)行 npm run dev 命令,啟動(dòng) webpack 進(jìn)行項(xiàng)目打包留荔。打包完成可見(jiàn)根目錄新建 dist\main.js吟孙,記得修改 index.html 中的js路徑。


3.配置打包的入口與出口

webpack 的 4.x 版本中默認(rèn)約定:

  • 打包的入口文件為 src\index.js
  • 打包的輸出文件為 dist\main.js

如果要修改打包的入口和出口聚蝶,可在 webpack.config.js 中新增如下配置信息:

const path = require('path') //導(dǎo)入node.js中專(zhuān)門(mén)操作路徑的模塊
module.exports = {
    entry: path.join(__dirname, './src/index.js'),  //打包入口文件的路徑
    output: {
        path: path.join(__dirname, './dist'),  //輸出文件的存放路徑
        filename: 'bundle.js'  //輸出文件的名稱
    }
}

4.配置自動(dòng)打包的功能

打包完成后如果需要修改css效果或是其他代碼杰妓,修改后直接刷新瀏覽器是不成功的,需要重新打包再執(zhí)行碘勉,非常麻煩巷挥,所以在這里配置 webpack 的自動(dòng)打包功能。
接上验靡,先 ctrl+c停掉自動(dòng)打包倍宾。

1.運(yùn)行 npm install webpack-dev-server -D 命令,安裝支持項(xiàng)目自動(dòng)打包的工具

2.修改package.json->scripts 中的 dev 命令如下:

      "dev":  "webpack-dev-server"

webpack-dev-server會(huì)啟動(dòng)一個(gè)實(shí)時(shí)打包的http服務(wù)器

3.將src\index.html中的script腳本引用路徑改為 bundle.js

<script src='/bundle.js'></script>

3.運(yùn)行npm run dev 命令晴叨,重新進(jìn)行打包(打包后不會(huì)退出終端凿宾,而是等待著代碼的改變

4.在瀏覽器中訪問(wèn) http://localhost:8080/ 查看自動(dòng)打包效果


5.配置生成預(yù)覽頁(yè)面

進(jìn)入http://localhost:8080/后看到的是根目錄,需要點(diǎn)擊手動(dòng)進(jìn)入index.html兼蕊,所以配置使點(diǎn)擊直接進(jìn)入index.html。

1.運(yùn)行npm install html-webpack-plugin -D命令件蚕,安裝生成預(yù)覽頁(yè)面的插件

2.修改 webpack.config.js 文件的頭部區(qū)域孙技,添加如下配置信息:

//導(dǎo)入生成預(yù)覽頁(yè)面的插件产禾,得到一個(gè)構(gòu)造函數(shù)
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin ({  //創(chuàng)建插件的實(shí)例對(duì)象
    template: './src/index.html',  //指定要用到的模板文件
    filename: 'index.html'  //指定生成的文件名稱,該文件存在于內(nèi)存中牵啦,在目錄中不顯示
})

3.修改 webpack.config.js 文件中向外暴露的配置對(duì)象亚情,新增如下配置節(jié)點(diǎn):

module.exports = {
    plugins:[ htmlPlugin ]  // plugin 數(shù)組是 webpack 打包期間會(huì)用到的一些插件列表
}

4.重新執(zhí)行npm run dev命令,進(jìn)入http://localhost:8080/查看效果


6.配置自動(dòng)打包的相關(guān)參數(shù)

運(yùn)行npm run dev后需要手動(dòng)復(fù)制瀏覽器地址才能查看頁(yè)面哈雏,修改使運(yùn)行后自動(dòng)彈出頁(yè)面楞件。

//package.json中的配置
// --open 打包完成后自動(dòng)打開(kāi)瀏覽頁(yè)面
// --host 配置 ip 地址
// --port 配置端口
"script": {
    "dev": "webpack-dev-server --open --host 127.0.0.1 --post 8888"
}

7.webpack中的加載器

在實(shí)際開(kāi)發(fā)過(guò)程中, webpack 默認(rèn)只能打包處理以 .js 后綴名結(jié)尾的模塊裳瘪,其他模塊默認(rèn)處理不了土浸,需要調(diào)用 loader 加載器才可以正常打包,否則會(huì)報(bào)錯(cuò)彭羹。
loader 加載器可以協(xié)助 webpack 打包處理特定的文件模塊黄伊,比如:

  • less-loader 可以打包處理 .less 相關(guān)的文件
  • sass-loader 可以打包處理 .scss 相關(guān)的文件
  • url-loader 可以打包處理 css 中與 url 路徑相關(guān)的文件

打包處理 css 文件

  1. 運(yùn)行npm i style-loader css-loader -D命令,安裝處理 css 文件的loader

2.在 webpack .config.js 的 module->rules 數(shù)組中派殷,添加 loader 規(guī)則如下:

// 所有第三方文件模塊的匹配規(guī)則
module: {
    rules: [
        { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }    
]
}
  • 其中还最, test 表示匹配的文件類(lèi)型, use 表示對(duì)應(yīng)要調(diào)用的 loader
  • use 數(shù)組中指定的 loader 順序是固定的

省略了在src/css中寫(xiě)css文件內(nèi)容及 index.js 中import css文件的步驟毡惜,下面也都省略了奧~

打包處理less文件

  1. 運(yùn)行 npm i less-loader less -D

2.在 webpack.config.js 的 module->rules 數(shù)組中拓轻,添加 loader 規(guī)則如下:

// 所有第三方文件模塊的匹配規(guī)則
module: {
    rules: [
        { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'less-loader' ] }    
]
}

打包處理scss文件

  1. 運(yùn)行 npm i sass-loader node-sass -D

2.在 webpack.config.js 的 module->rules 數(shù)組中,添加 loader 規(guī)則如下:

// 所有第三方文件模塊的匹配規(guī)則
module: {
    rules: [
       { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] }    
]
}

8.配置postCSS自動(dòng)添加css的兼容前綴

1.運(yùn)行npm i postcss-loader autoprefixer -D

2.在項(xiàng)目根目錄中創(chuàng)建 postcss 的配置文件 postcss.config.js 经伙,并初始化如下配置:

const autoprefixer = require('autoprefixer') //導(dǎo)入自動(dòng)添加前綴的插件
module.exports = {
    plugins: [autoprefixer] //掛載插件
}

3.在 webpack.config.js 的module->rules 數(shù)組中悦即,修改(不是添加) css 的 loader 規(guī)則如下:

module: {
    rules:[
      { test: /\.css$/, use: [ 'style-loader', 'css-loader', 'postcss-loader' ] }
]
}

9.打包樣式表中的圖片和字體文件

1.運(yùn)行npm i url-loader file-loader -D

  1. webpack.config.js 的 module->rules 中添加loader規(guī)則:
{ test: /\.jpg|png|gif|bmp|ttf|svg|woff|woff2$/, use: 'url-loader?limit=2147'}

limit是圖片大小


10.打包處理js文件中的高級(jí)語(yǔ)法

如果直接在index.js文件中加上:

class Person{
     static info='aaa'
}

直接運(yùn)行會(huì)報(bào)錯(cuò),因?yàn)槟J(rèn)打包不了這種高級(jí)語(yǔ)法橱乱,需要配置辜梳。

1.安裝babel轉(zhuǎn)換器相關(guān)的包npm i babel-loader @babel/core @babel/runtime -D
2.安裝babel語(yǔ)法插件相關(guān)的包npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
3.在項(xiàng)目根目錄中創(chuàng)建babel配置文件 babel.config.js 并初始化基本配置如下:

module.exports = {
    presets: [ '@babel/preset-env' ],
    plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]
}

4.在 webpack.config.js 的module->rules 數(shù)組中,添加 loader 規(guī)則:

// exclude為排除項(xiàng)泳叠,表示 babel-loader不需要處理 node_modules 中的js文件
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

這樣再運(yùn)行就可以在控制臺(tái)輸出'aaa'了作瞄。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市危纫,隨后出現(xiàn)的幾起案子宗挥,更是在濱河造成了極大的恐慌,老刑警劉巖种蝶,帶你破解...
    沈念sama閱讀 211,496評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件契耿,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡螃征,警方通過(guò)查閱死者的電腦和手機(jī)搪桂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人踢械,你說(shuō)我怎么就攤上這事酗电。” “怎么了内列?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,091評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵撵术,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我话瞧,道長(zhǎng)嫩与,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,458評(píng)論 1 283
  • 正文 為了忘掉前任交排,我火速辦了婚禮划滋,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘个粱。我一直安慰自己古毛,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,542評(píng)論 6 385
  • 文/花漫 我一把揭開(kāi)白布都许。 她就那樣靜靜地躺著稻薇,像睡著了一般。 火紅的嫁衣襯著肌膚如雪胶征。 梳的紋絲不亂的頭發(fā)上塞椎,一...
    開(kāi)封第一講書(shū)人閱讀 49,802評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音睛低,去河邊找鬼案狠。 笑死,一個(gè)胖子當(dāng)著我的面吹牛钱雷,可吹牛的內(nèi)容都是我干的骂铁。 我是一名探鬼主播,決...
    沈念sama閱讀 38,945評(píng)論 3 407
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼罩抗,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼拉庵!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起套蒂,我...
    開(kāi)封第一講書(shū)人閱讀 37,709評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤钞支,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后操刀,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體烁挟,經(jīng)...
    沈念sama閱讀 44,158評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,502評(píng)論 2 327
  • 正文 我和宋清朗相戀三年骨坑,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了撼嗓。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,637評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖静稻,靈堂內(nèi)的尸體忽然破棺而出警没,到底是詐尸還是另有隱情匈辱,我是刑警寧澤振湾,帶...
    沈念sama閱讀 34,300評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站亡脸,受9級(jí)特大地震影響押搪,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜浅碾,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,911評(píng)論 3 313
  • 文/蒙蒙 一大州、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧垂谢,春花似錦厦画、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,744評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至徙邻,卻和暖如春排嫌,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背缰犁。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,982評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工淳地, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人帅容。 一個(gè)月前我還...
    沈念sama閱讀 46,344評(píng)論 2 360
  • 正文 我出身青樓颇象,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親并徘。 傳聞我的和親對(duì)象是個(gè)殘疾皇子遣钳,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,500評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • webpack使用學(xué)習(xí) 本分享學(xué)習(xí)借鑒webpack中文官網(wǎng),官網(wǎng)鏈接(中文文檔):https://www.web...
    腿毛怪丶叔叔閱讀 870評(píng)論 0 5
  • 目錄第1章 webpack簡(jiǎn)介 11.1 webpack是什么饮亏? 11.2 官網(wǎng)地址 21.3 為什么使用 web...
    lemonzoey閱讀 1,731評(píng)論 0 1
  • 源碼地址:https://github.com/h2huanghui/WEBPACK-BASE 一耍贾、概念 webp...
    smartHui閱讀 1,738評(píng)論 0 1
  • 在現(xiàn)在的前端開(kāi)發(fā)中,前后端分離路幸、模塊化開(kāi)發(fā)荐开、版本控制、文件合并與壓縮简肴、mock數(shù)據(jù)等等一些原本后端的思想開(kāi)始...
    Charlot閱讀 5,433評(píng)論 1 32
  • 美的教育晃听,決定孩子的生命質(zhì)地。 同樣,美的行為能扒,可以浸潤(rùn)孩子的靈魂佣渴。 深以為然。 小事:今天課堂上第五小組表現(xiàn)極好...
    研究僧在小學(xué)閱讀 363評(píng)論 0 5