webpack 基礎(chǔ)一
1.webpack開(kāi)篇
<body>
<!--
1.什么是webpack?
webpack是一套基于NodeJS的"模塊打包工具",
在webpack剛推出的時(shí)候就是一個(gè)單純的JS模塊打包工具,可以將多個(gè)模塊的JS文件合并打包到一個(gè)文件中
但是隨著時(shí)間的推移、眾多開(kāi)發(fā)者的追捧和眾多開(kāi)發(fā)者的貢獻(xiàn)
現(xiàn)在webpack不僅僅能夠打包JS模塊, 還可以打包CSS/LESS/SCSS/圖片等其它文件
2.為什么要分模塊?
如果將所有的JS代碼都寫(xiě)到一個(gè)文件中, 十分不利于代碼的維護(hù)和復(fù)用
所以我們可以將不同的功能寫(xiě)到不同的模塊中, 這樣就提升了代碼的維護(hù)性和復(fù)用性
但是當(dāng)將代碼寫(xiě)到不同模塊時(shí)新的問(wèn)題又出現(xiàn)了,
例如: 導(dǎo)入資源變多了, 請(qǐng)求次數(shù)變多了, 網(wǎng)頁(yè)性能也就差了
例如: 不同功能都放到了不同模塊中了, 那么如何維護(hù)模塊之間的關(guān)系也變成一個(gè)難題了
<script src="./header.js"></script>
<script src="./content.js"></script>
<script src="./index.js"></script>
<script src="./footer.js"></script> // 如果index.js中用到了footer,就會(huì)報(bào)錯(cuò),因?yàn)轫樞驁?zhí)行的原因
例如: ... ...
3.如何解決上述問(wèn)題
3.1 將上述js文件封裝成模塊,在主文件中再導(dǎo)入依賴(lài)模塊
3.2項(xiàng)目上線時(shí)將用到的所有模塊都合并到一個(gè)文件中,通過(guò)webpack打包
3.3在index.html中只導(dǎo)入主文件
4.如何通過(guò)webpack來(lái)打包JS模塊
4.1安裝webpack
npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli
4.2在終端中輸入打包的指令
npx webpack index.js
注意點(diǎn):
index.js就是需要打包的文件
打包之后的文件會(huì)放到dist目錄中, 名稱(chēng)叫做main.js
-->
<!--如下,我把header ,content,footer放在index里,然后打包index代碼就可以了
<script src="index.js"></script>
<script src="Header.js"></script>
<script src="Content.js"></script>
<script src="Footer.js"></script>
-->
<script src="dist/main.js"></script>
</body>
2.webpack配置文件
2.1
<body>
<!--
1.什么是webpack配置文件?
我們?cè)诖虬麶S文件的時(shí)候需要輸入: npx webpack index.js
這句指令的含義是: 利用webpack將index.js和它依賴(lài)的模塊打包到一個(gè)文件中
其實(shí)在webpack指令中除了可以通過(guò)命令行的方式告訴webpack需要打包哪個(gè)文件以外,
還可以通過(guò)配置文件的方式告訴webpack需要打包哪個(gè)文件
2.webpack常見(jiàn)配置
entry: 需要打包的文件
output: 打包之后輸出路徑和文件名稱(chēng)
mode: 打包模式 development/production
development: 不會(huì)壓縮打包后的JS代碼
production: 會(huì)自動(dòng)壓縮打包后的JS代碼
-->
<!--<script src="dist/main.js"></script>-->
<script src="bundle/bundle.js"></script>
</body>
js代碼如下
const path = require("path");
module.exports = {
/*
mode: 指定打包的模式, 模式有兩種
一種是開(kāi)發(fā)模式(development): 不會(huì)對(duì)打包的JS代碼進(jìn)行壓縮
還有一種就是上線(生產(chǎn))模式(production): 會(huì)對(duì)打包的JS代碼進(jìn)行壓縮
* */
mode: "development", // "production" | "development"
/*
entry: 指定需要打包的文件
* */
entry: "./index.js",
/*
output: 指定打包之后的文件輸出的路徑和輸出的文件名稱(chēng)
* */
output: {
/*
filename: 指定打包之后的JS文件的名稱(chēng)
* */
filename: "bundle.js",
/*
path: 指定打包之后的文件存儲(chǔ)到什么地方
* */
path: path.resolve(__dirname, "bundle")
}
};
2.2 配置文件注意點(diǎn)
<body>
<!--
1.webpack配置注意事項(xiàng)
配置文件的名稱(chēng)必須叫做: webpack.config.js, 否則直接輸入 npx webpack打包會(huì)出錯(cuò)
如果要使用其它名稱(chēng), 那么在輸入打包命令時(shí)候必須通過(guò) --config 指定配置文件名稱(chēng)
npx webpack --config xxx
2.打包命令簡(jiǎn)化
每次輸入npx webpack --config xxx來(lái)打包文件會(huì)有一點(diǎn)蛋疼, 所以我們可以通過(guò)npm script來(lái)簡(jiǎn)化這個(gè)操作
即在初始化npm后在package.json改為如下
"scripts": {
"test": "npx webpack --config webpack.config.js"
},
-->
<script src="bundle/bundle.js"></script>
</body>
3.sourcemap
<body>
<!--
1.什么是sourcemap?
webpack打包后的文件會(huì)自動(dòng)添加很多代碼, 在開(kāi)發(fā)過(guò)程中非常不利于我們?nèi)フ{(diào)試
因?yàn)槿绻\(yùn)行webpack打包后的代碼,錯(cuò)誤提示的內(nèi)容也是打包后文件的內(nèi)容
所以為了降低調(diào)試的難度, 提高錯(cuò)誤代碼的閱讀性, 我們就需要知道打包后代碼和打包之前代碼的映射關(guān)系
只要有了這個(gè)映射關(guān)系我們就能很好的顯示錯(cuò)誤提示的內(nèi)容, 存儲(chǔ)這個(gè)映射關(guān)系的文件我們就稱(chēng)之為sourcemap
2.如何開(kāi)啟sourcemap
https://www.webpackjs.com/configuration/devtool/
2.1在webpack.config.js中添加
devtool: "xxx",
2.2各配置項(xiàng)說(shuō)明:
eval:
不會(huì)單獨(dú)生成sourcemap文件, 會(huì)將映射關(guān)系存儲(chǔ)到打包的文件中, 并且通過(guò)eval存儲(chǔ)
優(yōu)勢(shì): 性能最好
缺點(diǎn): 業(yè)務(wù)邏輯比較復(fù)雜時(shí)候提示信息可能不全面不正確
source-map:
會(huì)單獨(dú)生成sourcemap文件, 通過(guò)單獨(dú)文件來(lái)存儲(chǔ)映射關(guān)系
優(yōu)勢(shì): 提示信息全面,可以直接定位到錯(cuò)誤代碼的行和列
缺點(diǎn): 打包速度慢
inline:
不會(huì)單獨(dú)生成sourcemap文件, 會(huì)將映射關(guān)系存儲(chǔ)到打包的文件中, 并且通過(guò)base64字符串形式存儲(chǔ)
cheap:
生成的映射信息只能定位到錯(cuò)誤行不能定位到錯(cuò)誤列
module:
不僅希望存儲(chǔ)我們代碼的映射關(guān)系, 還希望存儲(chǔ)第三方模塊映射關(guān)系, 以便于第三方模塊出錯(cuò)時(shí)也能更好的排錯(cuò)
了解后我們只需要以下用就行
2.3企業(yè)開(kāi)發(fā)配置:
development: cheap-module-eval-source-map
只需要行錯(cuò)誤信息, 并且包含第三方模塊錯(cuò)誤信息, 并且不會(huì)生成單獨(dú)sourcemap文件
production: cheap-module-source-map
只需要行錯(cuò)誤信息, 并且包含第三方模塊錯(cuò)誤信息, 并且會(huì)生成單獨(dú)sourcemap文件
-->
<script src="bundle/bundle.js"></script>
</body>
js代碼
//在上面配置文件的基礎(chǔ)上加上以下配置即可
/*
配置sourcemap
development: cheap-module-eval-source-map
production: cheap-module-source-map
* */
devtool: "cheap-module-source-map",
4.接下來(lái)要學(xué)習(xí)各種各樣的loader
4.1 loader基本概念
<body>
<!--
1.什么是loader?
webapck的本質(zhì)是一個(gè)模塊打包工具, 所以webpack默認(rèn)只能處理JS文件,不能處理其他文件,
因?yàn)槠渌募袥](méi)有模塊的概念, 但是在企業(yè)開(kāi)發(fā)中我們除了需要對(duì)JS進(jìn)行打包以外,
還有可能需要對(duì)圖片/CSS等進(jìn)行打包, 所以為了能夠讓webpack能夠?qū)ζ渌奈募?lèi)型進(jìn)行打包,
在打包之前就必須將其它類(lèi)型文件轉(zhuǎn)換為webpack能夠識(shí)別處理的模塊,
用于將其它類(lèi)型文件轉(zhuǎn)換為webpack能夠識(shí)別處理模塊的工具我們就稱(chēng)之為loader
2.如何使用loader
webpack中的loader都是用NodeJS編寫(xiě)的, 但是在企業(yè)開(kāi)發(fā)中我們完全沒(méi)有必要自己編寫(xiě),
因?yàn)橐呀?jīng)有眾多大神幫我們編寫(xiě)好了企業(yè)中常用的loader, 我們只需要安裝、配置、使用即可
2.1通過(guò)npm安裝對(duì)應(yīng)的loader
2.2按照l(shuí)oader作者的要求在webpack進(jìn)行相關(guān)配置
2.3使用配置好的loader
-->
</body>
4.2 fileloader使用
<!--
fileloader使用
https://www.webpackjs.com/loaders/file-loader/
1.1安裝file-loader
npm install --save-dev file-loader
1.2在webpack.config.js中配置file-loader
module: 告訴webpack如何處理webpack不能夠識(shí)別的文件
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {}
}
]
}
]
}
-->
</body>
4.3 loader其他配置
<body>
<!--
注意點(diǎn):
默認(rèn)情況下fileloader生成的圖片名就是文件內(nèi)容的 MD5 哈希值
如何想打包后不修改圖片的名稱(chēng), 那么可以新增配置 name: "[name].[ext]"
其它命名規(guī)則詳見(jiàn): placeholders
注意點(diǎn):
默認(rèn)情況下fileloader會(huì)將生成的圖片放到dist根目錄下面
如果想打包之后放到指定目錄下面, 那么可以新增配置 outputPath: "images/"
注意點(diǎn):
如果需要將圖片托管到其它服務(wù)器, 那么只需在打包之前配置 publicPath: "托管服務(wù)器地址"即可
-->
</body>
js代碼如下
module: {
rules: [
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
// 指定打包后文件名稱(chēng)
name: '[name].[ext]',
// 指定打包后文件存放目錄
outputPath: 'images/',
// 指定托管服務(wù)器地址(統(tǒng)一替換圖片地址)
publicPath: 'http://www.it666.com/images/'
}
}
]
}
]
}
4.4 url-loader的使用
<body>
<!--
1.urlloader
url-loader 功能類(lèi)似于 file-loader，
但是在文件大小（單位 byte）低于指定的限制時(shí)，可以返回一個(gè) DataURL
2.urlloader使用
https://www.webpackjs.com/loaders/url-loader/
2.1安裝urlloader
npm install --save-dev url-loader
2.2配置urlloader
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
/*
limit: 指定圖片限制的大小
如果被打包的圖片超過(guò)了限制的大小, 就會(huì)將圖片保存為一個(gè)文件
如果被打包的圖片沒(méi)有超過(guò)限制的大小, 就會(huì)將圖片轉(zhuǎn)換成base64的字符串
注意點(diǎn):
對(duì)于比較小的圖片, 我們將圖片轉(zhuǎn)換成base64的字符串之后, 可以提升網(wǎng)頁(yè)的性能 (因?yàn)闇p少了請(qǐng)求的次數(shù))
對(duì)于比較大的圖片, 哪怕我們將圖片轉(zhuǎn)換成了base64的字符串之后, 也不會(huì)提升網(wǎng) 頁(yè)的性能, 還有可能降低網(wǎng)頁(yè)的性能
(因?yàn)閳D片如果比較大, 那么轉(zhuǎn)換之后的字符串也會(huì)比較多, 那么網(wǎng)頁(yè)的體積就會(huì)比較 大, 那么訪問(wèn)的速度就會(huì)變慢)
*/
limit: 1024 * 100,
// 指定打包后文件名稱(chēng)
name: '[name].[ext]',
// 指定打包后文件存放目錄
outputPath: 'images/',
}
}
]
}
優(yōu)勢(shì):
圖片比較小的時(shí)候直接轉(zhuǎn)換成base64字符串圖片, 減少請(qǐng)求次數(shù)
圖片比較大的時(shí)候由于生成的base64字符串圖片也比較大, 就保持原有的圖片
-->
</body>
4.5 css-loader的使用
<body>
<!--
1.css-loader
和圖片一樣webpack默認(rèn)能不能處理CSS文件, 所以也需要借助loader將CSS文件轉(zhuǎn)換為webpack能夠處理的類(lèi)型
2.css-loader使用:
2.1安裝cssloader
npm install --save-dev css-loader
2.2安裝styleloader
npm install style-loader --save-dev
2.3配置css-loader
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
3.css-loader和style-loader作用
css-loader: 解析css文件中的@import依賴(lài)關(guān)系
style-loader: 將webpack處理之后的內(nèi)容插入到HTML的HEAD代碼中
注意點(diǎn):
4.loader特點(diǎn):
4.1單一原則, 一個(gè)loader只做一件事情
4.2多個(gè)loader會(huì)按照從右至左, 從下至上的順序執(zhí)行
例如: 從右至左
[ 'style-loader', 'css-loader' ]
先執(zhí)行css-loader解析css文件關(guān)系拿到所有內(nèi)容,
再執(zhí)行style-loader將內(nèi)容插入到HTML的HEAD代碼中
例如: 從下至上
[{
loader: "style-loader"
},{
loader: "css-loader"
}]
先執(zhí)行css-loader解析css文件關(guān)系拿到所有內(nèi)容,
再執(zhí)行style-loader將內(nèi)容插入到HTML的HEAD代碼中
-->
</body>
4.6 ES6-Module
<body>
<!--
1.ES6模塊化
在ES6出現(xiàn)之前，JS不像其他語(yǔ)言擁有“模塊化”這一概念，于是為了支持JS模塊化
我們使用類(lèi)、立即執(zhí)行函數(shù)或者第三方插件(RequireJS、seaJS)來(lái)實(shí)現(xiàn)模塊化
但是在ES6出現(xiàn)之后, 上述解決方案都已經(jīng)被廢棄, 因?yàn)镋S6中正式引入了模塊化的概念
ES6模塊化模塊和NodeJS中一樣, 一個(gè)文件就是一個(gè)模塊, 模塊中的數(shù)據(jù)都是私有的
ES6模塊化模塊和NodeJS中一樣, 可以通過(guò)對(duì)應(yīng)的關(guān)鍵字暴露模塊中的數(shù)據(jù),
可以通過(guò)對(duì)應(yīng)的關(guān)鍵字導(dǎo)入模塊, 使用模塊中暴露的數(shù)據(jù)
2.ES6模塊化使用
2.1常規(guī)導(dǎo)出
2.1.1分開(kāi)導(dǎo)入導(dǎo)出
export xxx;
import {xxx} from "path";
2.1.2一次性導(dǎo)入導(dǎo)出
export {xxx, yyy, zzz};
import {xxx, yyy, zzz} from "path";
注意點(diǎn):
接收導(dǎo)入變量名必須和導(dǎo)出變量名一致
如果想修改接收變量名可以通過(guò) xxx as newName方式
變量名被修改后原有變量名自動(dòng)失效
2.2默認(rèn)導(dǎo)入導(dǎo)出
export default xxx;
import xxx from "path";
注意點(diǎn):
一個(gè)模塊只能使用一次默認(rèn)導(dǎo)出, 多次無(wú)效
默認(rèn)導(dǎo)出時(shí), 導(dǎo)入的名稱(chēng)可以和導(dǎo)出的名稱(chēng)不一致
-->
<script src="index.js"></script>
</body>
來(lái)用js寫(xiě)一下
/*
ES6模塊化的第一種方式
導(dǎo)出數(shù)據(jù): export {xxx};
導(dǎo)入數(shù)據(jù): import {xxx} from "path";
*/
/*
注意點(diǎn):
1.如果是通過(guò)export {xxx};方式導(dǎo)出數(shù)據(jù), 那么在導(dǎo)入接收的時(shí)候接收的變量名稱(chēng)必須和導(dǎo)出的名稱(chēng)一致
究其原因是因?yàn)樵趯?dǎo)入的時(shí)候本質(zhì)上是ES6的解構(gòu)賦值
2.如果是通過(guò)export {xxx};方式導(dǎo)出數(shù)據(jù), 又想在導(dǎo)入數(shù)據(jù)的時(shí)候修改接收的變量名稱(chēng), 那么可以使用as來(lái)修改
但是如果通過(guò)as修改了接收的變量名稱(chēng), 那么原有的變量名稱(chēng)就會(huì)失效
*/
import {name} from "./a.js";//a.js中定義name
/*
下為解構(gòu)賦值
let obj = {
name: "lnj",
age: 34
};
let {name, age} = obj;
console.log(name);
let {str, age} = obj; str是undefined
console.log(str);
console.log(age);
*/
//下為注意點(diǎn)2
import {name as str} from "./a.js";
console.log(name);//此時(shí)name啥也沒(méi)了
console.log(str);
/*
ES6模塊化的第二種方式
導(dǎo)出數(shù)據(jù): export default xxx;
導(dǎo)入數(shù)據(jù): import xxx from "path";
*/
/*
注意點(diǎn):
1.如果是通過(guò)export default xxx;導(dǎo)出數(shù)據(jù), 那么在接收導(dǎo)出數(shù)據(jù)的時(shí)候變量名稱(chēng)可以和導(dǎo)出的名字不一致
2.如果是通過(guò)export default xxx;導(dǎo)出數(shù)據(jù), 那么在模塊中只能使用一次export default
*/
// import name from "./b.js";此時(shí)兩種方式都正確
import str from "./b.js";
console.log(str);
//此時(shí)下面使用了兩次導(dǎo)出的操作,所以會(huì)報(bào)錯(cuò)
import name from "./b.js";
import age from "./b.js";
console.log(name);
console.log(age);
// 兩種方式混合使用
import Person,{name, age, say} from "./c.js"; //c中定義了三個(gè)變量和一個(gè)Person類(lèi),采用不同的導(dǎo)出方式
let p = new Person();
console.log(p);
console.log(name);
console.log(age);
say();
//學(xué)習(xí)了es6的導(dǎo)入導(dǎo)出后,我們以前使用的require導(dǎo)入就可以換一種寫(xiě)法
// const icon = require("./lnj.jpg");
// const _ = require("./index.css");
import icon from "./lnj.jpg";
import "./index.css";
let oImg = document.createElement("img");
oImg.src = icon;
oImg.setAttribute("class", "size");//index.css中對(duì)圖片進(jìn)行了一些操作
document.body.appendChild(oImg);
4.7 less-loader
<body>
<!--
1.less-loader
自動(dòng)將less轉(zhuǎn)換為CSS
2.less-loader使用:
2.0安裝less
npm install --save-dev less
2.1安裝less-loader
npm install --save-dev less-loader
2.2配置less-loader
在rules中添加以下代碼
{
test: /\.less$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader"
}, {
loader: "less-loader"
}]
}
注意點(diǎn):
因?yàn)閘oader是從右至左從下至上,所以必須先由less-loader處理往后才能交給其他loader處理
-->
</body>
4.8 sass-loader
<body>
<!--
1.scss-loader
自動(dòng)將scss轉(zhuǎn)換為CSS
2.scss-loader使用:
2.0安裝scss
npm install --save-dev node-sass
2.1安裝less-loader
npm install --save-dev sass-loader
2.2配置less-loader
{
test: /\.scss$/,
use: [{
loader: "style-loader" // 將 JS 字符串生成為 style 節(jié)點(diǎn)
}, {
loader: "css-loader" // 將 CSS 轉(zhuǎn)化成 CommonJS 模塊
}, {
loader: "sass-loader" // 將 Sass 編譯成 CSS
}]
}
注意點(diǎn):
因?yàn)閘oader是從右至左從下至上,所以必須先由sass-loader處理往后才能交給其他loader處理
-->
</body>
4.9 PostCSS-loader之補(bǔ)全前綴(棒呆了)
<body>
<!--
1.什么是PostCSS?
https://www.postcss.com.cn/
PostCSS和sass/less不同, 它不是CSS預(yù)處理器
PostCSS是一款使用插件去轉(zhuǎn)換CSS的工具，
PostCSS有許多非常好用的插件
例如
autoprefixer(自動(dòng)補(bǔ)全瀏覽器前綴)
postcss-pxtorem(自動(dòng)把px代為轉(zhuǎn)換成rem)
... ...
-->
<!--
2.使用PostCSS自動(dòng)補(bǔ)全瀏覽器前綴
2.1安裝postcss-loader
npm i -D postcss-loader
2.2安裝需要的插件
npm i -D autoprefixer
2.3配置postcss-loader
在css-loader or less-loader or sass-loader之前添加postcss-loader
2.4創(chuàng)建postcss-loader配置文件(新加的一步)
postcss.config.js
https://github.com/browserslist/browserslist#queries
2.5在postcss.config.js配置文件中配置autoprefixer
module.exports = {
plugins: {
"autoprefixer": {
"overrideBrowserslist": [
// "ie >= 8", // 兼容IE7以上瀏覽器
// "Firefox >= 3.5", // 兼容火狐版本號(hào)大于3.5瀏覽器
// "chrome >= 35", // 兼容谷歌版本號(hào)大于35瀏覽器,
// "opera >= 11.5" // 兼容歐朋版本號(hào)大于11.5瀏覽器,
"chrome >= 36", // 如果需要適配的瀏覽器完全兼容則不會(huì)添加前綴
]
}
}
};
-->
</body>
4.10 PostCSS-loader之轉(zhuǎn)換px為rem(棒呆了)
在前邊的項(xiàng)目中,為了適配屏幕,學(xué)習(xí)了許多適配方法,最常用的有通過(guò)rem適配,我們先通過(guò)圖片大小以及屏幕大小計(jì)算根目錄的fontsize(計(jì)算方法在前面的筆記),然后使用的時(shí)候我們需要這樣來(lái)寫(xiě),比如高度是300px,我們得寫(xiě)300/100rem(舉個(gè)例子),現(xiàn)在有了PostCSS-loader就不用這么麻煩了.
<body>
<!--
3.使用PostCSS自動(dòng)將px轉(zhuǎn)換成rem
https://www.npmjs.com/package/postcss-pxtorem
3.1安裝postcss-pxtorem
npm install postcss-pxtorem -D
3.2在postcss.config.js配置文件中配置postcss-pxtorem
"postcss-pxtorem": {
rootValue: 100, // 就是我們上面要除的那個(gè)100,也就是原始圖片每一份的大小
// propList: ['*'] // 可以從px更改到rem的屬性
propList: ["height"]
}
rootValue (Number) root 元素的字體大小。
unitPrecision (Number) 允許REM單位增長(zhǎng)到的十進(jìn)制數(shù)。
propList ( array ) 可以從px更改到rem的屬性。
值需要精確匹配。
使用通配符 * 啟用所有屬性。 示例：['*']
在單詞的開(kāi)頭或者結(jié)尾使用 *。 ( ['*position*'] 將匹配 background-position-y )
使用 與屬性不匹配。! 示例：['*','letter-spacing']!
將"非"前綴與其他前綴合并。 示例：['*','font*']!
selectorBlackList ( array ) 要忽略和離開(kāi)的選擇器。
如果值為字符串，它將檢查選擇器是否包含字符串。
['body'] 將匹配 .body-class
如果值為 regexp，它將檢查選擇器是否匹配正則表達(dá)式。
[/^body$/] 將匹配 body，但不匹配 .body
replace (Boolean) 替代包含rems的規(guī)則，而不是添加回退。
mediaQuery (Boolean) 允許在媒體查詢(xún)中轉(zhuǎn)換 px。
minPixelValue (Number) 設(shè)置要替換的最小像素值。
突然感覺(jué)淡淡不憂傷了, 過(guò)去麻煩的事webpack都幫我們做完了
-->
</body>
4.11 css-loader 模塊化
<body>
<!--
1.默認(rèn)情況下通過(guò)import "./xxx.css"導(dǎo)入的樣式是全局樣式
也就是只要被導(dǎo)入, 在其它文件中也可以使用
如果想要導(dǎo)入的CSS文件只在導(dǎo)入的文件中有效, 那么就需要開(kāi)啟CSS模塊化
{
loader: "css-loader",
options: {
modules: true // 開(kāi)啟CSS模塊化
}
}
然后在導(dǎo)入的地方通過(guò) import xxx from "./xxx.css"導(dǎo)入
然后在使用的地方通過(guò) xxx.className方式使用即可
-->
</body>
舉個(gè)例子
import icon from "./lnj.jpg";
// import "./index.css"
import cssModule from "./index.css"http://導(dǎo)入方式改變
import {addImage} from "./custom.js";
console.log(cssModule);
let oImg = document.createElement("img");
oImg.src = icon;
// oImg.setAttribute("class", "size");
oImg.setAttribute("class", cssModule.size);//使用方式改變
document.body.appendChild(oImg);
addImage();//這里是另一個(gè)js文件,如下
//本來(lái)在沒(méi)有模塊化時(shí), less文件中的size類(lèi)會(huì)對(duì)兩張圖片作用,而模塊化后,只對(duì)當(dāng)前文件的圖片產(chǎn)生作用
/*
import icon from "./lnj.jpg";
function addImage() {
let oImg = document.createElement("img");
oImg.src = icon;
oImg.setAttribute("class", "size");
document.body.appendChild(oImg);
}
export {addImage};
*/
4.12 iconfont-loader使用
<body>
<!--
1.如何打包字體圖標(biāo)
字體圖標(biāo)中也用到了url用到了文件, 所以我們需要通過(guò)file-loader來(lái)處理字體圖標(biāo)文件
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use:[{
loader: "file-loader",
options: {
name: "[name].[ext]",
outputPath: "font/",
}
}]
}
-->
</body>
在js使用時(shí)
import "./font/iconfont.css"
document.body.innerHTML = "<i class='iconfont icon-icon' style='font-size: 100px'></i>";
