Vue系列之 => webpack的url loader
阿新 • • 發佈:2019-01-09
安裝:
npm i url-loader file-loader -D //url-loader內部依賴file-loader
webpack.config.js
const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry : path.join(__dirname,'./src/main.js'), output : { path : path.join(__dirname,'./dist'), filename :'bundle.js' }, plugins : [ new htmlWebpackPlugin({ template : path.join(__dirname,'./src/index.html'), filename : 'index.html' }) ], module : { rules : [ {test:/\.css$/,use:['style-loader','css-loader']}, {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},// 處理圖片路徑的loader. loader可以傳參跟url傳參一樣 // limit給定的值是圖片的大小,單位是byte,如果引用的圖片大於或等於給定的limit值,則不會 // 被轉為base64格式的字串,如果圖片小於給定的limit值,則會被轉為base64格式的字串。 // [hash:8]-在每個圖片前加8位的雜湊值.從32位雜湊值取前8位。配置最大32 {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=1000&name=[hash:8]-[name].[ext]'} ] } }
引用字型圖示
安裝bootstrap npm i [email protected] -S
main.js 引入bootstrap的css檔案
import $ from 'jquery' import './css/index.css' import './css/index.scss' // 如果要通過路徑的形式,去引入node_modules中相關的檔案,可以直接省略路徑前面的node_modules這一層目錄 //直接寫包的名稱,然後後面跟上具體的檔案路徑。 import 'bootstrap/dist/css/bootstrap.css' $(function(){ $('li:odd').css('backgroundColor','green'); $('li:even').css('backgroundColor',function(){ return 'blue'; }); });
webpack.config.js 配置
const path = require('path'); const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry : path.join(__dirname,'./src/main.js'), output : { path : path.join(__dirname,'./dist'), filename : 'bundle.js' }, plugins : [ new htmlWebpackPlugin({ template : path.join(__dirname,'./src/index.html'), filename : 'index.html' }) ], module : { rules : [ {test:/\.css$/,use:['style-loader','css-loader']}, {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, // 處理圖片路徑的loader. loader可以傳參跟url傳參一樣 // limit給定的值是圖片的大小,單位是byte,如果引用的圖片大於或等於給定的limit值,則不會 // 被轉為base64格式的字串,如果圖片小於給定的limit值,則會被轉為base64格式的字串。 // [hash:8]-在每個圖片前加8位的雜湊值.從32位雜湊值取前8位。配置最大32 {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=1000&name=[hash:8]-[name].[ext]'}, {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'}//這是處理字型檔案的配置 ] } }