柚子快報激活碼778899分享：前端 面試 學(xué)習(xí) demo04
柚子快報激活碼778899分享：前端 面試 學(xué)習(xí) demo04
最后
開源分享：【大廠前端面試題解析+核心總結(jié)學(xué)習(xí)筆記+真實(shí)項目實(shí)戰(zhàn)+最新講解視頻】
使用loader加載樣式打包
loader可以識別css等并一起打包
新建demo03，基本上可以使用demo02的內(nèi)容，在根目錄下放一個index.html
demo03
然后src下面搞一個index.css
body{
background-color: blanchedalmond;
}
在index.js中引入
import ‘./index.css’
因?yàn)閣ebpack默認(rèn)不支持css引入，所以要使用loader
let path=require(‘path’)
module.exports={
entry:“./src/index.js”,//入口文件
output:{
filename:‘bundle.js’,//輸出文件名
path:path.resolve(__dirname,‘dist’)//輸出路徑，用絕對路徑
},
mode:‘development’,//生產(chǎn)模式
module:{
//對某種格式的文件進(jìn)行轉(zhuǎn)換處理
rules:[
{
test:/.css$/,//使用正則匹配
use:[
//順序從下到上
‘style-loader’,//把css-js引入到style
‘css-loader’,//把css轉(zhuǎn)換成js
]
}
]
}
}
要安裝兩個loader依賴
之前的顏色生效了
使用plugin插件
先可以實(shí)現(xiàn)自動整合編譯，需要用到的插件為html-webpack-plugin要安裝依賴
/index.html
demo04
let path=require(‘path’)
let HtmlWebpackPlugin=require(‘html-webpack-plugin’)
module.exports={
entry:“./src/index.js”,//入口文件
output:{
filename:‘bundle.js’,//輸出文件名
path:path.resolve(__dirname,‘dist’)//輸出路徑，用絕對路徑
},
mode:‘development’,//生產(chǎn)模式
module:{
//對某種格式的文件進(jìn)行轉(zhuǎn)換處理
rules:[
{
test:/.css$/,//使用正則匹配
use:[
//順序從下到上
‘style-loader’,//把css-js引入到style
‘css-loader’,//把css轉(zhuǎn)換成js
]
}
]
},
//配置插件
plugins:[
new HtmlWebpackPlugin({
template:‘./index.html’
})
]
}
運(yùn)行webpack之后發(fā)現(xiàn)dist目錄下有了新的index.html
打包圖片資源
新建demo05
在入口index.js中引入圖片
demo04
這時候肯定要加關(guān)于png的依賴
需要兩個loader： url-loader html-loader file-loader
let path=require(‘path’)
let HtmlWebpackPlugin=require(‘html-webpack-plugin’)
module.exports={
entry:“./src/index.js”,//入口文件
output:{
filename:‘bundle.js’,//輸出文件名
path:path.resolve(__dirname,‘dist’)//輸出路徑，用絕對路徑
},
mode:‘development’,//生產(chǎn)模式
module:{
//對某種格式的文件進(jìn)行轉(zhuǎn)換處理
rules:[
{
test:/.css$/,//使用正則匹配
use:[
//順序從下到上
‘style-loader’,//把css-js引入到style
‘css-loader’,//把css轉(zhuǎn)換成js
]
},{
test:/.(jpg|png|gif)$/,
loader:‘url-loader’,
options:{
limit:8*1024,//圖片小于8kb,用base64處理，減少請求
esModule:false,//把url-loader的es6模塊化解析取消，不加的話與html-loader沖突，src會變成object module
name:‘[hash:10].[ext]’,//取圖片hash的前十位與擴(kuò)展名來命名
}
},{
test:/.html$/,
loader:‘html-loader’,//用來解析html
}
]
},
//配置插件
plugins:[
new HtmlWebpackPlugin({
template:‘./index.html’
})
]
}
打包結(jié)果可以看見
熱更新
使用插件
tyarn add webpack-dev-server -g
let path=require(‘path’)
let HtmlWebpackPlugin=require(‘html-webpack-plugin’)
module.exports={
entry:“./src/index.js”,//入口文件
output:{
filename:‘bundle.js’,//輸出文件名
path:path.resolve(__dirname,‘dist’),//輸出路徑，用絕對路徑
},
mode:‘development’,//生產(chǎn)模式
最后
基礎(chǔ)知識是前端一面必問的，如果你在基礎(chǔ)知識這一塊翻車了，就算你框架玩的再6，webpack、git、node學(xué)習(xí)的再好也無濟(jì)于事，因?yàn)閷Ψ骄筒粫俳o你展示的機(jī)會，千萬不要因?yàn)榛A(chǔ)錯過了自己心怡的公司。前端的基礎(chǔ)知識雜且多，并不是理解就ok了，有些是真的要去記。當(dāng)然了我們是牛x的前端工程師，每天像背英語單詞一樣去背知識點(diǎn)就沒必要了，只要平時工作中多注意總結(jié)，面試前端刷下題目就可以了。
開源分享：【大廠前端面試題解析+核心總結(jié)學(xué)習(xí)筆記+真實(shí)項目實(shí)戰(zhàn)+最新講解視頻】
“./src/index.js”,//入口文件
output:{
filename:‘bundle.js’,//輸出文件名
path:path.resolve(__dirname,‘dist’),//輸出路徑，用絕對路徑
},
mode:‘development’,//生產(chǎn)模式
最后
基礎(chǔ)知識是前端一面必問的，如果你在基礎(chǔ)知識這一塊翻車了，就算你框架玩的再6，webpack、git、node學(xué)習(xí)的再好也無濟(jì)于事，因?yàn)閷Ψ骄筒粫俳o你展示的機(jī)會，千萬不要因?yàn)榛A(chǔ)錯過了自己心怡的公司。前端的基礎(chǔ)知識雜且多，并不是理解就ok了，有些是真的要去記。當(dāng)然了我們是牛x的前端工程師，每天像背英語單詞一樣去背知識點(diǎn)就沒必要了，只要平時工作中多注意總結(jié)，面試前端刷下題目就可以了。
開源分享：【大廠前端面試題解析+核心總結(jié)學(xué)習(xí)筆記+真實(shí)項目實(shí)戰(zhàn)+最新講解視頻】
柚子快報激活碼778899分享：前端 面試 學(xué)習(xí) demo04
精彩內(nèi)容
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點(diǎn)和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Tradeling貿(mào)易出海港
