安裝css-loader
$ npm install css-loader style-loader
前者(css-loader)是為了遍曆你的css，後者(style-loader)是為了進行style標記產生
利用它就可以把css給打包了，我們加入設定檔
{ test:/\.css$/, loaders:['style','css']}
然後執行: webpack命令
html如下：
<!DOCTYPE html><html><head> <title>es2105的寫法</title> <meta charset="utf-8"> <script type="text/javascript" src="es2015/index-webpack.js"></script></head><body><div>歡迎光臨</div></body></html>
預覽效果：
如果css中包含圖片呢。
$ npm install url-loader
設定檔加入
{
test:/.(png)|(jpg)$/,
loader: “url?limit=50000”
}
limit參數，代表如果小於大約50k則會自動幫你壓縮base64編碼的圖片
查看css檔案：
div{color: red;background: url("./1.jpg");}
查看最後的設定檔webpack.config.js
module.exports = { // configuration entry: "./es2015/index.js", //代表入口(總)檔案，可以寫多個 output: { path: "./es2015/", //輸出檔案夾 filename: "index-webpack.js" //最終打包產生的檔案名稱 }, module: { loaders: [ { test: /\.js|jsx$/, //是一個正則，代表js或者jsx尾碼的檔案要使用下面的loader loader: "babel", query: {presets: ['es2015']} }, { test:/\.css$/, loaders:['style','css'] }, { test:/\.(png)|(jpg)$/, loader: "url?limit=50000" } ] }}
同樣執行webpack命令後，我們來查看圖片是否載入
我們可以看到css裡的背景圖片也成功載入，並且轉換成了base64。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
