Vue系列之 => webpack的url loader

安裝：

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 bootstrap@3.3.7 -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'}//這是處理字體文件的配置
        ]
    }
}