創(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 文件
- 運(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文件
- 運(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文件
- 運(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
- 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'了作瞄。